Accordion

[Nidzo]

Feature request
Description, Features, Video, Specifications, Reviews etc. are currently displayed as Tabs. On mobile phones it doesn't look nice when you have more Tabs. There is no space to display it in one row.

I think that would be much prettier if those options could be displayed as accordion list.

Is it possible to include this as feature request to have option to display that part of Item as Tabs or as Accordion?



Thanks!

[Jan]

Hi, thank you for the idea, I will take a look at it but not sure if there is such feature in bootstrap or uikit which are used for stylizing the output

Jan

[Nidzo]

Screenshot was made according to Bootstrap 5.X manual.
https://getbootstrap.com/docs/5.0/components/accordion/

Thanks!

[Jan]

Hi, yes, there is accordion in BS, but the question is, if there is some way in BS to transform tabs to accordion only with CSS for small screens. Because you can have only one Bootstrap code, the server side which renders the HTML does not have any information about which screen is used, so it only produces one HTML for Bootstrap. So when this should work, there needs to be a way in Boostrap which can with help of CSS only change the tabs to accordion

Jan

[Nidzo]

I understand! What about to make it as option to choose one or another only for all devices?

[Jan]

Hi, I will take a look at this but generally because of limit for parameters, all design changes should be rather done in overrides than per parameters

Jan

[Nidzo]

There is no need. Similar functionality and look can be achieved with css.

[Jan]

Hi, great to hear it, thank you for this guide.

Jan

[dmlwebal]

Hi

Great solution Nidzo

I include it here for simply copy and paste

Code: Select all

ul#PcItemTab {
display: flex;
flex-direction:column;
flex-wrap: nowrap;
margin-left: -15px;
}


.nav-tabs .nav-link:before {
content: "\f103";
font-family:'Font Awesome 5 Free';
padding-right: 15px;
}

I prefer margin-left: -1rem and padding-right: 1rem but this is a great solution

I could only suggest further expansion via use of display: content; on parent container classes and some javascript to create accordion effect, but some CSS animation may also work.

David

[Nidzo]

Thanks @dmlwebal. There is space for fine tuning of code according to needs.