Accordion

Phoca Cart - complex e-commerce extension
User avatar
Nidzo
Phoca Professional
Phoca Professional
Posts: 369
Joined: 07 Nov 2018, 14:55

Accordion

Post by 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?

Image

Thanks!

Tags:
User avatar
Jan
Phoca Hero
Phoca Hero
Posts: 48299
Joined: 10 Nov 2007, 18:23
Location: Czech Republic
Contact:

Re: Accordion

Post by 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 :idea:

Jan
If you find Phoca extensions useful, please support the project
User avatar
Nidzo
Phoca Professional
Phoca Professional
Posts: 369
Joined: 07 Nov 2018, 14:55

Re: Accordion

Post by Nidzo »

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

Thanks!
User avatar
Jan
Phoca Hero
Phoca Hero
Posts: 48299
Joined: 10 Nov 2007, 18:23
Location: Czech Republic
Contact:

Re: Accordion

Post by 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 :idea:

Jan
If you find Phoca extensions useful, please support the project
User avatar
Nidzo
Phoca Professional
Phoca Professional
Posts: 369
Joined: 07 Nov 2018, 14:55

Re: Accordion

Post by Nidzo »

I understand! What about to make it as option to choose one or another only for all devices? :oops:
User avatar
Jan
Phoca Hero
Phoca Hero
Posts: 48299
Joined: 10 Nov 2007, 18:23
Location: Czech Republic
Contact:

Re: Accordion

Post by 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 :idea:

Jan
If you find Phoca extensions useful, please support the project
User avatar
Nidzo
Phoca Professional
Phoca Professional
Posts: 369
Joined: 07 Nov 2018, 14:55

Re: Accordion

Post by Nidzo »

There is no need. Similar functionality and look can be achieved with css. :wink:
Image
User avatar
Jan
Phoca Hero
Phoca Hero
Posts: 48299
Joined: 10 Nov 2007, 18:23
Location: Czech Republic
Contact:

Re: Accordion

Post by Jan »

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

Jan
If you find Phoca extensions useful, please support the project
User avatar
dmlwebal
Phoca Professional
Phoca Professional
Posts: 238
Joined: 18 Sep 2019, 12:49

Re: Accordion

Post by 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
User avatar
Nidzo
Phoca Professional
Phoca Professional
Posts: 369
Joined: 07 Nov 2018, 14:55

Re: Accordion

Post by Nidzo »

Thanks @dmlwebal. 👍🏻 There is space for fine tuning of code according to needs.
Post Reply