Menu icon Foundation
How to convert Tab to Accordion ?

How to convert Tab to Accordion. I am using using Tab in Webpage and i need to convert that to accordion while viewing in the mobile.Please suggest

Tab to Accordion

How to convert Tab to Accordion. I am using using Tab in Webpage and i need to convert that to accordion while viewing in the mobile.Please suggest

Trying To Be Helpful about 5 years ago

Since Foundation tabs and accordion menus both use Definition Lists and Divs... I'd suggest you replace [ dl class="tabs vertical" data-tab ] with [ dl class="accordion" data-accordion ] using jQuery for your mobile breakpoint and alter accordingly.

Or create both tab and accordion menus but show tabs for medium and up & accordion for small only. It is extra HTML, but easier if you can't code a switcheroo. GOOD LUCK!

BTW, please search the forum first... as this question has been asked multiple times:

» http://foundation.zurb.com/forum/posts/1678-how-to-change-f5-tabs-in-accordion--in-small-screens

» http://foundation.zurb.com/forum/posts/860-switching-tabs-to-accordian-for-small-screens

» http://foundation.zurb.com/forum/posts/2278-convert-tabs-to-accordian-for-small

Matt Barrett about 5 years ago
jinch about 3 years ago

Has anyone been able to get this to work with FOUNDATION 6?

jinch about 3 years ago

Thanks Rafi, that seams to only show the expanded tab on mobile view. The other tabs disappear from few so its not a true accordion. Meaning you can not click the other items to expand when viewed on small screens / just the one that is currently expanded.

Jarryd Fillmore about 3 years ago

Nice Rafi!