jQuery: create tabs with jQueryUI

In order to create tabs on a web page, jQueryUI is a powerful tool and helps us to divide content into tabbed sections. The use of different pages to display appropriate information is an old technique now. It is undoubtedly faster and more efficient to show the content in tabs, even using AJAX.
jQueryUI is a unique tool, and "tabs" is one of its features.

Let's see how it works.

We need some libraries

First of all we need to link to jQuery, jQueryUI and a jQueryUI CSS. To make things easier we can connect to the Google Api library.
The base CSS:

jQuery:

and jQueryUI:

Now we have everything we need. That will all go into the head of our web page.

The jQuery code

jQueryUI has many possible options to manage the tabs. Here we will just see the basic usage, while you can visit jQueryUI site to see all the available demos.
To initiate the tabs, we just need a few lines of code:

We assume that "#tabs" is the id of the tabs container, as shown in the HTML code below. The above goes again in the head of the document.

The HTML

Now we only need to insert the HTML:

   

       
• Tab 1 Title

       
• Tab 2 Title

       
• Tab 3 Title

   

   

       

tab 1 content

   

   

       

tab 2 content

   

   

       

tab 3 content

   

And that's all.

I hope you like the example. If you need more help, please just ask.