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.
<link rel="stylesheet" href="jquery.tabs.css"> <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.
|
Tab-1 content goes here
Tab-2 content goes here
Tab-3 content goes here
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.
|
Tab-1 content goes here
Tab-2 content goes here
Tab-3 content goes here
JS
Adding jquery tabs function on page to create vertical tabs.
<script> $(function () { $('#verticalTab').jqTabs(); }); script> |
See live demo and download source code.
See official github repository for more information and follow for future updates.
