Lightweight jQuery plugin to create simple horizontal and vertical tabs
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.
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.