JavaScript & AJAX

Create a Tabbed Interface Using jQuery


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:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery UI Tabs Demo</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="jquery-ui-personalized-1.5.2.packed.js"></script>
<script type="text/javascript" src="sprinkle.js"></script>

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.

Part A – ‘Vanilla’ Tabbed UI

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

Step a.1 – The HTML

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

    <div id="tabvanilla" class="widget">

    <ul class="tabnav">
    <li><a href="#popular">Popular</a></li>
    <li><a href="#recent">Recent</a></li>
    <li><a href="#featured">Featured</a></li>

    <div id="popular" class="tabdiv">
    <li><a href="#">Welsh Zombie Sheep Invasion</a></li>
    <li><a href="#">Sheep Rising From The Dead</a></li>
    <li><a href="#">Blogosphere Daily Released!</a></li>
    <li><a href="#">Aliens Infiltrate Army Base In UK Town</a></li>
    <li><a href="#">U2 Rocks New York's Central Park</a></li>
    <li><a href="#">TA Soldiers Wear Uniforms To Work</a></li>
    <li><a href="#">13 People Rescued From Flat Fire</a></li>
    <li><a href="#">US Troops Abandon Afghan Outpost</a></li>
    <li><a href="#">Are We Alone? A Look Into Space</a></li>
    <li><a href="#">Apple iPhone 3G Released</a></li>

    <div id="recent" class="tabdiv">
    <p>Lorem ipsum dolor sit amet.</p>

    <div id="featured" class="tabdiv">
    <li><a href="#">Aliens Infiltrate Army Base In UK Town</a></li>
    <li><a href="#">Are We Alone? A Look Into Space</a></li>
    <li><a href="#">U2 Rocks New York's Central Park</a></li>
    <li><a href="#">TA Soldiers Wear Uniforms To Work</a></li>
    <li><a href="#">13 People Rescued From Flat Fire</a></li>
    <li><a href="#">US Troops Abandon Afghan Outpost</a></li>
    <li><a href="#">Sheep Rising From The Dead</a></li>
    <li><a href="#">Blogosphere Daily Released!</a></li>
    <li><a href="#">Apple iPhone 3G Released</a></li>
    <li><a href="#">Welsh Zombie Sheep Invasion</a></li>


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

    <div id="featuredvid" class="widget">

    <div class="fvid" id="vid-1">
    <object width="270" height="152">	<param name="allowfullscreen" value="true" />	<param name="allowscriptaccess" value="always" />	<param name="movie" value="" />	<embed src="" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="270" height="152"></embed></object>

    <div class="fvid" id="vid-2">
    <object width="270" height="219"><param name="movie" value=""></param><param name="allowFullScreen" value="true"></param><embed src="" type="application/x-shockwave-flash" allowfullscreen="true" width="270" height="219"></embed></object>

    <div class="fvid" id="vid-3">
    <object width="270" height="219"><param name="movie" value=""></param><param name="allowFullScreen" value="true"></param><embed src="" type="application/x-shockwave-flash" allowfullscreen="true" width="270" height="219"></embed></object>

    <ul class="vidselector">
        <li><a href="#vid-1"><span>Where The Hell Is Matt? (2008)</span></a></li>
        <li><a href="#vid-2"><span>Clint Eastwood's The Office</span></a></li>
        <li><a href="#vid-3"><span>Pale Blue Dot</span></a></li>


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

Both these effects have been incorporated into CocoaNews - the
first in a family of WordPress themes from vivaWP
coming mid-August.

Related Posts
  • Web Design
    Complete Websites
    Building the Responsive Timeline Portfolio PagePortfolio thumb
    During this tutorial we will be building the fantastic Timeline Portfolio as seen in an earlier tutorial by Tomas Laurinavicius. We will be using some responsive techniques as well as CSS3 animations, Sass and a little bit of jQuery.Read More…
  • Web Design
    Build a Top Bar Off-Canvas Navigation With Foundation 5Foundation menu
    Today, we are going to combine ZURB's Foundation 5 Off-Canvas feature with our top bar navigation. The result will be a nice custom navigation for desktop users and a sleek off -canvas menu for tablet and mobile users. Read More…
  • Code
    HTML5: Battery Status APIPdl54 preview image@2x
    The number of people browsing the web using mobile devices grows every day. It's therefore important to optimize websites and web applications to accommodate mobile visitors. The W3C (World Wide Web Consortium) is well aware of this trend and has introduced a number of APIs that help with this challenge. In this article, I will introduce you to one of these APIs, the Battery Status API.Read More…
  • Web Design
    Case Studies
    How They Did It: Typekit's New HomepageTypekit retina
    Typekit recently redesigned their homepage with some new services in mind. When Typekit joined Adobe, they set out to bring us a new way to handle fonts on the web. Not only did they create a fairly simple way to embed fonts on the web, but they have now officially launched a desktop sync option, which allows Creative Cloud subscribers to sync fonts to their computer directly from Typekit. This has been in a beta form for a while now, and provides a much easier route to local fonts than finding them elsewhere!Read More…
  • Web Design
    Walk Users Through Your Website With Bootstrap TourTour retina
    When you have a web application which requires some getting used to from your users, a walkthrough of the interface is in order. Creating a walkthrough directly on top of the interface makes things very clear, so that's what we're going to build, using Bootstrap Tour.Read More…
  • Code
    Tools & Tips
    Tips to Avoid Brittle UI TestsUi test retina preview
    In the last article I talked about a few ideas and patterns, like the Page Object pattern, that help write maintainable UI tests. In this article we are going to discuss a few advanced topics that could help you write more robust tests, and troubleshoot them when they fail:Read More…