Lightweight jQuery plugin to create simple horizontal and vertical tabs

by Posted on

In this tutorial I am going to show you a lightweight jQuery plugin to create simple horizontal and vertical tabs. If you want to display more content in less space then Tabs are a great way of grouping lots of content into a very small space. Using this plugin you can easily create simple horizontal and vertical html tabs and group your content in less space.
jquery-tabs


Lightweight jQuery plugin to create simple horizontal and vertical tabs

Follow given steps to integrate tabs feature on your web page.

Libraries

First of all include jquery tabs libraries on page.

<!-- CSS -->
<link rel="stylesheet" href="jquery.tabs.css">
 
<!-- JS -->
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script src="jquery.tabs.min.js"></script>

Creating Horizontal Tabs

HTML

Adding sample html to make it horizontal tabs.

<div class="jq-tab-wrapper" id="horizontalTab">
        <div class="jq-tab-menu">
            <div class="jq-tab-title active" data-tab="1">title 1</div>
            <div class="jq-tab-title" data-tab="2">title 2</div>
            <div class="jq-tab-title" data-tab="3">title 3</div>
        </div>
        <div class="jq-tab-content-wrapper">
            <div class="jq-tab-content active" data-tab="1">Tab-1 content goes here</div>
            <div class="jq-tab-content" data-tab="2">Tab-2 content goes here</div>
            <div class="jq-tab-content" data-tab="3">Tab-3 content goes here</div>
        </div>
    </div>

JS

Adding jquery tabs function on page to create horizontal tabs.

<script>
        $(function () {
            $('#horizontalTab').jqTabs({direction: 'horizontal', duration: 200});
        });
</script>



Creating Vertical Tabs

HTML

Adding sample html to make it vertical tabs.

<div class="jq-tab-wrapper" id="verticalTab">
        <div class="jq-tab-menu">
            <div class="jq-tab-title active" data-tab="1">title 1</div>
            <div class="jq-tab-title" data-tab="2">title 2</div>
            <div class="jq-tab-title" data-tab="3">title 3</div>
        </div>
        <div class="jq-tab-content-wrapper">
            <div class="jq-tab-content active" data-tab="1">Tab-1 content goes here</div>
            <div class="jq-tab-content" data-tab="2">Tab-2 content goes here</div>
            <div class="jq-tab-content" data-tab="3">Tab-3 content goes here</div>
        </div>
    </div>

JS

Adding jquery tabs function on page to create vertical tabs.

<script>
        $(function () {
            $('#verticalTab').jqTabs();
        });
</script>

See live demo and download source code.

DEMO | DOWNLOAD

See official github repository for more information and follow for future updates.



Published by admin