A simple solution for having tabbed content on a large screen but turn it into accordion on a smaller one. Just resize your screen below 800 pixels to see the tabbed interface transforming into an accordion.
In order to keep the HTML as clean as possible, without duplicating elements, we use element attributes as CSS content to display the accordion tabs.
Tab 2 content. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque
volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non,
semper suscipit, posuere a, pede. Nullam malesuada erat ut turpis. Suspendisse urna nibh,
viverra non, semper suscipit, posuere a, pede.
Tab 3 content. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque
volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non,
semper suscipit, posuere a, pede. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna
nibh, viverra non, semper suscipit, posuere a, pede. Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis.
Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
Tab 4 content. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque
volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non,
semper suscipit, posuere a, pede. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna
nibh, viverra non, semper suscipit, posuere a, pede. Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis.
Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
OLD AGE CARE PROGRAM
REJUVENATION PROGRAM
DETOX PROGRAM
CORPORATE WELLNESS
WEIGHT LOSS PROGRAM
YOUTH WELLNESS
