Menu icon Foundation
Switching Tabs to Accordian for small screens

In foundation 4 it was possible to switch between tabs and accordion based on screen size. I'd love to be able to do this, as a tabbed display looks better on a large screen, but breaks on a small screen. Is there any way to do this with foundation 5?

Thanks

tabsaccordionsswitchingauto

In foundation 4 it was possible to switch between tabs and accordion based on screen size. I'd love to be able to do this, as a tabbed display looks better on a large screen, but breaks on a small screen. Is there any way to do this with foundation 5?

Thanks

Rafi Benkual almost 6 years ago

Here is the solution:

http://plnkr.co/edit/8YjuEdPwswZJJ694Rjox?p=preview

Make sure to have this before the closing body tag:

                 <script>
      $('#new').on('opened', function () {
        $(document).foundation('section', 'reflow');
      });
    </script>

Neil Haskins almost 6 years ago

Unless I'm mistaken this solution is for foundation 4.3.2.

I'm asking if this is possible in foundation 5.

Thanks

Vinay Raghu almost 6 years ago

Neil, I think they decided to drop that support in F5. You might want to look at other alternatives such as http://webtrendset.com/demo/easy-responsive-tabs/Index.html

Brian Heffron almost 6 years ago

Why even bother to include the tabs in a "mobile first" framework if they don't work on mobile? This was one of the best features of the older F versions and now they just delete it?

Rafi Benkual almost 6 years ago

@Brian
With Sections in Foundation 4 that was possible. Sections were deprecated because they were causing more issues than solutions for users.

I think this was answered here as well http://foundation.zurb.com/forum/posts/1678-how-to-change-f5-tabs-in-accordion--in-small-screens