Menu icon Foundation
Section plugin in F4 vs Accordion+Tabs

Hi all,

I wonder why would the wonderful "Sections" plugin available in Foundation 4 be split into Accordion and Tabs plugins ?

Just try to view the "tabs" documentation on a narrow phone-like viewport, and you will notice that instead of the accordion behaviour in F4, now the tabs are all displayed one below another, and the content zone is shown below all the tabs, hardly very user friendly or natural way.

So now there seems to be no way to make vertical or horizontal tabs switch to accordion display when on small screens, or did I miss something here ?

How to make tabs ebhave nicely and friendly on small screens then ?

Thanks

accordiontabssection

Hi all,

I wonder why would the wonderful "Sections" plugin available in Foundation 4 be split into Accordion and Tabs plugins ?

Just try to view the "tabs" documentation on a narrow phone-like viewport, and you will notice that instead of the accordion behaviour in F4, now the tabs are all displayed one below another, and the content zone is shown below all the tabs, hardly very user friendly or natural way.

So now there seems to be no way to make vertical or horizontal tabs switch to accordion display when on small screens, or did I miss something here ?

How to make tabs ebhave nicely and friendly on small screens then ?

Thanks

Kieran Mahon over 5 years ago

Interested in the thinking behind this too. My latest project featured the Section js quite a bit. Vertical Tabs, Accordions, deep_linking built into navigation etc. I was going to update the project to F% as it is still in development but this is making me worried. Has it been simplified because the other Section system on F4 wasn’t fully working?

Love to get this clarified guys, as it will influence the design process on all jobs..

thanks.

Xandros over 5 years ago

Here is an answer from foundationzurb on twitter :

"sections were deprecated due the difficulty of customization for our client work. Applying on practical experience, the styles were difficult to apply. The new tabs and accordions have nicer markup"

Cheshire Isaacs over 5 years ago

I too miss this function. However, the F4 sections never really looked as nice or worked as smoothly as I would have liked. I'm going back to a great piece of code I used on a non-Foundation site. Works like a charm, and the developer is very responsive, no pun intended.

Zozo tabs:
http://codecanyon.net/item/zozo-tabs/3327836

He also has an accordion piece of code that works great as well.

Hope this is helpful for anyone else missing sections...

Paolo D'Onorio De Meo over 5 years ago

Isn't anybody missing the deep linking feature in the new tabs?

I just cannot update to foundation 5 without that basic feature.

Martin Polley almost 5 years ago

I've used Interchange to do something similar. I just use visibility classes to show regular divs on medium/large screens and an accordion on small screens:

http://uxcod.es/samples/interchange_test/

I use Interchange to pull the same HTML partials into each. That way, I don't have to duplicate the content. (This isn't really what Interchange was designed for, but it works great.)

You could do the same, but instead of regular divs for bigger screens, use tabs.