Turn tabs into accordion style for mobile

JavaScript
1

Hi all

I have a tabbing system which I’ve used for some time now (works good), I’m trying to modify this now so it works better on mobile.

I’ve created a testing area - http://jsfiddle.net/88zaS/3/

If you minimise your screen you’ll see the tabs expand full width.
My problem is, instead of the content now showing at the bottom of the tabs, I’d like the content to show underneath/inside the tabs like a general accordion does, though only for the mobile breakpoint.

Will I need to make changes to the markup?
Is this a simple fix with the JS?

Any guidance appreciated thanks.

Barry

2

Yes, I would modify the markup to group together the titles with their respective content. That way you could easily achieve both layouts. I think for the large version the content divs would have to be absolutely positioned whereas for the mobile version you would relatively position them.

Hope that helped

3

Here you go.
You just need to upgrade js a bit with those fades because i am a bit in hurry to look thought it.
Cya