Responsive Tabs/Accordions using Foundation Framework

As a mobile-first CSS framework, I found it really odd that the tabs that ship with Foundation aren’t responsive. As your screen gets smaller, they just start stacking up, killing UX and defeating the point of having a mobile-first design.

The normal functionality would be for tabs to switch over to accordions as the screen gets small, which is what I was after. Foundation provides tabs and accordions out of the box, so the easy solution would be to just have both show, hide one for small screens and show the other. But that’s ugly and duplicating more code than we need.

Then I stumbled on this pen.

The site I’m building this functionality on is a WordPress site with Themosis and ACF, so I needed to adapt that to my view.

Here’s what I came up with

And here’s how it works…

On line 3 we add the show-for-medium-up  class to the ul  for the tab navigation.

Then we have to change how the tab content is shown. Normally it would be in a div  with the class tabs-content , but that won’t work here. So we just replace that with the normal code for accordions and like magic it’s working. We just need to make sure that the accordion links have the class show-for-small-only  so they only show up on small devices. One thing to note: I did try with the ul/li based code for accordions and that would not work for me. I had to switch to the dl/dd version.

It seems like this is functionality that should be present by default in a framework like this, but at least it’s fairly trivial to hack your way to making it work.

Leave a Reply