Easy Responsive Tabs

Easy responsive tabs - is a lightweight jQuery plugin which optimizes normal horizontal or vertical tabs to accordion on multi devices like: web, tablets, Mobile (IPad & IPhone). This plugin adapts the screen size and changes its action accordingly.

Plugin Documentation

Usage

JS

In order to use this plugin on your page you will need to include the following script in the page.

copy

<script src="assets/libs/easy-responsive-tabs/js/easyResponsiveTabs.js"></script>

CSS

In order to use this plugin on your page you will need to include the following css in the page.

copy

<link rel="stylesheet" href="assets/libs/easy-responsive-tabs/css/easy-responsive-tabs.css">

Initialization

Add the below init function before the closing </body> tag, to enable it.

copy

<script>
    $(document).on('ready', function () {
        $('#demoTab').easyResponsiveTabs({ tabidentify: 'Horizontal' });
    });
</script>

Examples

copy

<div id="demoTab">
    <ul class="resp-tabs-list Horizontal">
        <li> ... </li>
        <li> ... </li>
        <li> ... </li>
    </ul>

    <div class="resp-tabs-container Horizontal">
        <div> ... </div>
        <div> ... </div>
        <div> ... </div>
    </div>
</div>
It's a default tab style, If you want to change the design style, then add class="tab-style-one" in the div. Please check the style in this page.