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?

tabsaccordionsautosections

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 almost 5 years ago

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

Ghaida Zahran over 5 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
http://foundation.zurb.com/docs/components/accordion.html

Tab Docs
http://foundation.zurb.com/docs/components/tabs.html

Interchange Docs
http://foundation.zurb.com/docs/components/interchange.html

Matt Barrett almost 5 years ago
Dmitri Pisarev almost 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 almost 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 :)

Regards,

Lyn.

Sal Baldovinos almost 5 years ago

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

James Farthing over 4 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 4 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,
https://github.com/samsono/Easy-Responsive-Tabs-to-Accordion

neil kanth over 4 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.

Matt, http://codepen.io/corradomatt/full/JkGtn/
can your hack be used vertically?

Claudio Venegas F. over 4 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 over 4 years ago

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

abdessamad idrissi over 4 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 about 4 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 dd.active a,
.tabs .tab-title:hover a,
.tabs .tab-title.active a { @if mixin-exists(tabs-hov) { @include tabs-hov; } }


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

Michael LaRoy about 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.

http://zurb.com/playground/responsive-tables

Rafi Benkual about 4 years ago

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