Foundation has long been in the responsive game, making it easy for you to build beautiful, responsive, mobile-first websites quickly out of the box. With Foundation 6.3, it gets even better - the long-anticipated “Tabcordion”, or Responsive Accordion/Tabs component lets you quickly and easily create a component that is an accordion at some breakpoints, and tabs at others. In this lesson we’re going to look at how easily it is to upgrade your existing accordions or tabs into a Responsive Accordion/Tabs.

Starting From Accordion

Let’s start out with a basic accordion example, copied straight out of the Foundation documentation.

[See Codepen Example]

In this example you can see the basic elements of an accordion - a containing list labeled with a data-accordion attribute, and some list items with data-accordion-item and content within them.

This is great - but accordions can feel a little awkward in a large screen. Say you want to keep it an accordion for small, but change it to a tabs layout for larger screens. With the new Responsive Accordion Tabs component, this is as simple as changing the data-accordion attribute to a data-responsive-accordion-tabs attribute that lays out your breakpoints, e.g. data-responsive-accordion-tabs=”accordion large-tabs”

[See Codepen Example]

Starting From Tabs

It’s just as easy starting from the tabs markup. Here’s a basic example, copied again straight from the Foundation documentation.

[See Codepen Example]

You can see the basic layout here - you have a list of your tabs labeled with data-tabs, and then a div labeled with data-tabs-content that contains the content. The markup is a bit different than in the accordion case, but the mechanism for turning this into a responsive component is the same. We simply change the data-tabs attribute into a data-responsive-accordion-tabs attribute, laying out our desired breakpoints in the same mobile-first manner that we use throughout the rest of Foundation.

Switching it up on Any Breakpoint

If we want it, for some bizarre reason, to be a tabs on small and large, but an accordion in medium, we can use data-responsive-accordion-tabs=”tabs medium-accordion large-tabs”, and it ends up looking like this:

[See Codepen Example]

---