Responsive Tabs

Posted on

in

,

Here is an example of tabs that change into an accordion on mobile. The HTML structure for the desktop tabs is like so:

<ul class="classA">
    <li class="current"><a>tab 1</a></li>
    <li><a>tab 2</a></li>
    <li><a>tab 3</a></li>
</ul>

..and the HTML for the tab contents including the mobile tabs:

<ul class="classB">
        <li><a href="#">mob tab 1</a>
        <div>tab contents 1</div></li>
        <li><a href="#">mob tab 2</a>
        <div>tab contents number 2</div></li>
        <li><a href="#">mob tab 3</a>
        <div>3rd tabs content</div></li>
</ul>

Then you call in the js:

tabs("classA","classB");

View the demo

Download the demo

Leave a Reply

Your email address will not be published. Required fields are marked *

About me

Mark Wong is a front end developer with 10+ years experience. Most of his knowledge of HTML5, CSS and Js is self taught.

Calendar

April 2024
M T W T F S S
1234567
891011121314
15161718192021
22232425262728
2930