< Back to Coding, jQuery

Responsive Tabs

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

Be Sociable, Share!

Leave a Reply

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