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.

Creating Horizontal Tabs

HTML

Adding sample html to make it horizontal tabs.

        

            
title 1
            
title 2
            
title 3
        
        

            
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.

Creating Vertical Tabs

HTML

Adding sample html to make it vertical tabs.

        

            
title 1
            
title 2
            
title 3
        
        

            
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.

See live demo and download source code.

DEMO | DOWNLOAD

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