Menu icon Foundation
How to change F5 Tabs in Accordion in small screens

Hi everyone: I want to know how to change the Tabs into accordion when i reach a small screen.

i saw that using sections in F4 was posible but how can i do it in F5?


Hi everyone: I want to know how to change the Tabs into accordion when i reach a small screen.

i saw that using sections in F4 was posible but how can i do it in F5?

Matt Barrett gave the most helpful answer for this post
Matt Barrett over 5 years ago

This post has been closed. No new replies can be added.

Ghaida Zahran almost 6 years ago

Sections are deprecated in F5. You now get a lot more control over content and presentation with tabs and accrodions in Foundation 5. You can load the appropriate component for different screen sizes with Interchange.

Accordion Docs

Tab Docs

Interchange Docs

Matt Barrett over 5 years ago
Dmitri Pisarev over 5 years ago

Ghaida, for interchange you need to create separate html file for every instance of tabs. That can be a pain, especially when working with CMS.

Matt's solution works, but it requires double amount of HTML code, that sucks!

The old sections from F4 were perfect, bring them back!

Lyn over 5 years ago

Hey there,

I guess you could also apply classes to elements based on window size with javascript and then trigger Foundation's reflow.
It may work, who knows :)



Sal Baldovinos over 5 years ago

@Matt - nice solution. Not ideal with extra markup, but it works and it's slick. Thanks!

James Farthing over 5 years ago

@Matt - excellent solution... appreciate the share.

@Dmitri & Sal... come on guys... did you even look at the code? just a HTML restructure with two additional Foundation classes. It isn't double... it isn't extra markup.

neil kanth over 5 years ago

This would be great if it didn't break with a data-table.

I will have to use, Easy-Responsive-Tabs-to-Accordion,

neil kanth over 5 years ago

I figured out that table width need to be set to 'auto'.

I tried using this as a vertical tab for larger screens by adding the 'vertical' class but then realized that the content height cannot be greater than the height of all tabs.

can your hack be used vertically?

Claudio Venegas F. about 5 years ago

@matt thanks, your solution worked for me, but can't figure out how to style the active state of the accordions tabs when is in accordion state, i can style the tabs but not the accordion. Hope you understand me. Thanks for any help.

Pressly Bonner about 5 years ago

@matt - Thank You! Saved me a lot of trouble.

abdessamad idrissi almost 5 years ago

Thanks guys for the solutions, but still all those are only hacks like @matt's solution to play with "show-for-small-only"..

Would appreciate seeing a native "Tab to accordion switcher" in coming foundation.

jm almost 5 years ago

i'm new to Foundation but i solved this as following. If you work with the sass Version this colud be very easy, without any additional Markup.

i don't manipulate the _settings for tabs at all, because for me this ist much harder to redesign the tabs. these classes are for the tabs. so i can manipulate the tabs as i want, even better than within the settings.

//@mixin tabs-def       { font-size: .85rem; family: inherit; padding: .2rem .8rem; margin: 0 1px; color: inherit; background: rgba(0,0,0,.05); }
//@mixin tabs-hov       { color: #222; background-color: #FFF; border-bottom: red 2px solid; }

.tabs { padding: 0; /*not in FD 5.5.1*/ }
.tabs dd > a, 
.tabs .tab-title > a      { @if mixin-exists(tabs-def) { @include tabs-def; } }    
.tabs dd:hover a, 
.tabs a,
.tabs .tab-title:hover a,
.tabs a { @if mixin-exists(tabs-hov) { @include tabs-hov; } }

@media #{ $small-only } 
    .tabs dd, 
    .tabs .tab-title      { float: none; margin: 1px auto; } 

Michael LaRoy over 4 years ago

Matt's is a great solution.

Total edge case though, Foundation's responsive-tables script (not tried-and-true in F5, mind you) breaks it when resizing the window.

Rafi Benkual over 4 years ago

Not sure what you mean @michael. If there is an issue lets discuss it on another post. Thanks!