Menu icon Foundation
F6 Switch from Tabs to Accordion on small screens

Trying out Foundation for the first time today and have a question.

What is the best approach to switch from Tabs to Accordion on small screens? Ideally without too much extra markup!

tabsaccordionF6

Trying out Foundation for the first time today and have a question.

What is the best approach to switch from Tabs to Accordion on small screens? Ideally without too much extra markup!

Rafi Benkual over 3 years ago

You can use the visibility classes or interchange to change the component based on screen size. Interchange is better so that you are not loading both markups on the page.

Daniel Coull over 2 years ago

Alternativly i wrote a smallish jquery class to do this.

 

Foundation 6 - TabToAccordian on Small

 

 

 

let me know if you find it helpful.

anycolleges 3 months ago

this method offers so much flexibility that you might consider replacing all your content tables with these techniques. You can continue to add different themes and styles with ease in CSS and designers will be much more effective if they understand upfront what responsive tables are capable of.