Create A Tabbed Interface Using jQuery

Part A – ‘Vanilla’ Tabbed UI

This is one of the most common uses for a tabbed interface:


Creating tabbed interfaces suddenly becomes a piece-of-cake when using the Tabs function in the jQuery UI library. It can be utilized to create completely unique interfaces without having to be a coding God – using only one line of code!

Step 1 – The Basics

In order to create our jQuery effects later in this tutorial, you will first need
the latest jQuery library, and
jQuery UI
with the ‘Core’ and ‘Tabs’ elements. If you’d prefer, you can
take these files from this tutorial’s source files.

Place these two files in a directory on your server. Also create the following files:

  • index.html
  • style.css
  • sprinkle.js

index.html will be for your HTML, style.css for the page styling
in CSS and sprinkle.js for our jQuery animations.

Inside index.html, lets open the document:

Here, we set our DOCType to XHTML 1 Transitional, and import our CSS and JS files.

Be sure to change ‘jquery-1.2.6.min.js’ and ‘jquery-ui-personalized-1.5.2.packed.js’

if your jQuery files have a different file name.


Step a.1 – The HTML

Between the <body> tags in our index file, type the following:


We begin by opening a DIV element with the ID of ‘tabvanilla’ and class of ‘widget’.

The ID will be used by jQuery in order to identify the area it should effect, and

the class is there for ease-of-use when styling.

Next is an unordered list with the Class of ‘tabnav’. The list contains the three

different tab names, each with a link in the style of “#xxxxx”. This is important

as these will be the IDs of the sections following.

The following div has an ID of ‘popular’, this matches with the link in the tabs

above. A ‘recent’ and ‘featured’ DIV is also included. These sections are what will

be shown/hidden by jQuery when the corresponding link it selected.

Depending on what content you have, you should have something like this:

Let’s make it look a little nicer, shall we?

Step a.2 – Styling

Add the following to your style.css file. It will be explained below.

    * {
margin: 0;
padding: 0;

body {
font-size: 75%;
color: #222;
background: #ffffff;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
line-height: 1.6em;

.widget {
width: 310px;
margin: 20px;
padding: 10px;
background: #f3f1eb;
border: 1px solid #dedbd1;
margin-bottom: 15px;

.widget a {
color: #222;
text-decoration: none;

.widget a:hover {
color: #009;
text-decoration: underline;

.tabnav li {
display: inline;
list-style: none;
padding-right: 5px;

.tabnav li a {
text-decoration: none;
text-transform: uppercase;
color: #222;
font-weight: bold;
padding: 4px 6px;
outline: none;

.tabnav li a:hover, .tabnav li a:active, .tabnav li.ui-tabs-selected a {
background: #dedbd1;
color: #222;
text-decoration: none;

.tabdiv {
margin-top: 2px;
background: #fff;
border: 1px solid #dedbd1;
padding: 5px;

.tabdiv li {
list-style-image: url("star.png");
margin-left: 20px;

.ui-tabs-hide {
display: none;

  • * – Removes browser-set defaults for margins & padding.

  • body – Adds some basic text styling.

  • .widget – – A little bit of colour for distinguishing

    the Tab areaa.

  • .widget a – Link styling.

  • .tabnav li – Displays the list in a ‘inline’ (horizontal)

    manner. Gives a bit of padding between them.

  • .tabnav li a – This helps the tabs stand out from any

    other content.

  • .tabdiv – Gives the ‘content’ section a bit more style

    to separate it from the tabs.

  • .tabdiv li – Adds a custom image for lists inside the

    ‘content’ area. The star.png file can be downloaded from this tutorial’s

    source files.

  • .ui-tabs-hide – jQuery will apply a class of ‘ui-tabs-hide’

    to div’s not in use. This sets it so they will not display when jQuery tells it


You should now have something like the following:

It’s not going to win any design awards, but it’s the functionality we’re interested

in; so let’s dive into the jQuery.

Step a.3 – A Sprinkle of jQuery

Basically, jQuery allows the user to change the styling of elements on the page

in real-time. So in our case, we want jQuery to hide all elements inside of ‘div#tabvanilla’

except the one which corresponds with the tab which has been selected.

Open sprinkle.js and insert the following:

$(document).ready(function() {
$('#tabvanilla > ul').tabs({ fx: { height: 'toggle', opacity: 'toggle' } });

THAT’S IT! But what does it mean?

$(document).ready(function() {

This line says “When the document is ready, do the following…” – ‘ready’

means when the very basics of the page has loaded (ie. Just the raw html); it will

not wait for images and video like if you used ‘onload’ instead.

$('#tabvanilla > ul').tabs({ fx: { height: 'toggle', opacity: 'toggle' } });

This tells the browser to look out of a ul list inside of an element

with the ID of tabvanilla, and to use the tabs

function to interact with. We also define two animation effects (fx:)

– toggling the height and opacity. This will cause the area to “fade and slide”

when switching tabs.

Give it a try. You should now have something similar to the image below; with a

smooth animation when switching tabs.

Part B – Video Selector

This is where you can really see bigger effects done using the same code. Next,

we’ll create a simple ‘Video Selector’ that can been seen in quite a few WordPress

templates recently.

Step b.1 – The HTML

Following on from the previous interface, add the following in your index.html



We begin by creating another ‘.widget’ div, but this time with the ID of ‘featuredvid’

(it’s important it has a different ID, as this is what jQuery uses to distinguish

tab sections from each other).

Next, we have three ‘.fvid’ divs with their own unique IDs. Inside each, is the

embed code for a video.

Finally, at the bottom is our ‘.vidselector’ list which will act as our Tabs. As

in the previous example, each list item’s link corresponds with one of the div’s


You should have something similar to this:

Step b.2 – Styling

In the style.css file, following on from the CSS in our previous example,

insert the following:

    #featuredvid {
text-align: center;

.fvid {
margin-bottom: 5px;

.vidselector li {
text-align: left;
list-style: none;
padding: 5px;
background: #ffffff;
border: 1px solid #dedbd1;
text-transform: uppercase;
margin-bottom: 5px;

  • .vidselector li – Creates the boxed effect for the video

    link to go in.

Step b.3 – A Sprinkle of jQuery

Inside sprinkle.js, add the following before the line containing });

from the previous example.

$('#featuredvid > ul').tabs();

This tells your browser to use the tabs function to interact with the ul list inside

the #featuredvid element. We aren’t defining any animation effects this time as

due to the nature of the content in these boxes (video), effects tend not to work

very well.

One problem that occurs with this effect is that Internet Explorer will not pause

the video in a tab when you switch to another – causing the sound to continue playing

the background. This does not happen in Firefox, Opera or Safari.


Hopefully this tutorial has shown you that much more can be done with basic jQuery

functions than you initially thought. Check

out the official documentation for jQuery UI/Tabs

Loading related posts...


Post a Comment

2010 WEBSITE20. All rights reserved.