jQuery: create tabs with jQueryUI

Tweet

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:

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css">

jQuery:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" ></script>

and jQueryUI:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>

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:

<script language="javascript" type="text/javascript">
    $(function() {
        $( "#tabs" ).tabs();
    });
</script>

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:

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Tab 1 Title</a></li>
        <li><a href="#tabs-2">Tab 2 Title</a></li>
        <li><a href="#tabs-3">Tab 3 Title</a></li>
    </ul>
    <div id="tabs-1">
        <p>tab 1 content</p>
    </div>
    <div id="tabs-2">
        <p>tab 2 content</p>
    </div>
    <div id="tabs-3">
        <p>tab 3 content</p>
    </div>
</div>

And that's all.

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