Advertise Here
jQuery Tabs

Create A Tabbed Interface Using jQuery

Dan Harper on Aug 13th 2008 with 142 comments
Tutorial Details
  • Technology: jQuery
  • Difficulty: Intermediate
  • Completion Time: 1 hour
Share

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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<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>
</head>
<body>
</body>
</html>

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>
    </ul>

    <div id="popular" class="tabdiv">
    <ul>
    <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>
    </ul>
    </div><!--/popular-->

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

    <div id="featured" class="tabdiv">
    <ul>
    <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>
    </ul>
    </div><!--featured-->

    </div><!--/widget-->

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
    to.

You should now have something like the following:

XEROX CODE

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
file.

    <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="http://www.vimeo.com/moogaloop.swf?clip_id=1211060&server=www.vimeo.com&show_title=1&show_byline=1&show_portrait=0&color=00ADEF&fullscreen=1" />	<embed src="http://www.vimeo.com/moogaloop.swf?clip_id=1211060&server=www.vimeo.com&show_title=1&show_byline=1&show_portrait=0&color=00ADEF&fullscreen=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="270" height="152"></embed></object>
    </div>

    <div class="fvid" id="vid-2">
    <object width="270" height="219"><param name="movie" value="http://www.youtube.com/v/gPwmG3VuO_E&hl=en&fs=1"></param><param name="allowFullScreen" value="true"></param><embed src="http://www.youtube.com/v/gPwmG3VuO_E&hl=en&fs=1" type="application/x-shockwave-flash" allowfullscreen="true" width="270" height="219"></embed></object>
    </div>

    <div class="fvid" id="vid-3">
    <object width="270" height="219"><param name="movie" value="http://www.youtube.com/v/p86BPM1GV8M&hl=en&fs=1"></param><param name="allowFullScreen" value="true"></param><embed src="http://www.youtube.com/v/p86BPM1GV8M&hl=en&fs=1" type="application/x-shockwave-flash" allowfullscreen="true" width="270" height="219"></embed></object>
    </div>

    <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>
    </ul>            

    </div><!--/featuredvid-->

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
IDs.

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.

Summary

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.

 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

Share
By Dan Harper

Rollover to read this author's bio or click through to see a full list of posts by this author.

This author has yet to write their bio.  

Plus Premium

Premium Members

Source Files, Bonus Tutorials & More for all relevant Tuts+ sites in one subscription. Join Now

 
 

Related Posts

Add Comment

Discussion 142 Comments

Comment Page 4 of 4 1 2 3 4
  1. donald says:
    August 29, 2009 at 2:44 pm

    This is a fantastic tutorial! I’m having a small problem when integrating into WordPress, though.

    I downloaded the script and tested it locally. No problem.

    Then I uploaded the css and js files to my WordPress site, redirected my local index file to them, and tested again locally. No problem.

    When I implemented the body code into WordPress, though, it didn’t work. The three content boxes all show at once, without the non-active ones being hidden. Also, clicking/hovering on the tabs shows a URL address of #XXX, unlike the localized tests.

    The blog is at http://aintyomamasblog.com/wp/
    [Please not that the blog is not public yet, and I post it here only for purposes of support. Please do not further publicize. Thanks.]

    Reply
  2. Josh says:
    August 31, 2009 at 9:30 am

    for whatever reason, this is the only jquery tab code i can get to work for me, so thanks. i’m trying to use this for nested tabs. basically, i’d like to have a horizontal tab bar, and have each tab display a different vertical menu of links. And then I’m hoping to have each link in the vertical list display to the right in a big block. do you have any pointers? how do i do this?

    Reply
  3. Rod says:
    August 31, 2009 at 1:21 pm

    Great information. Thanks for

    Reply
  4. Leo says:
    September 2, 2009 at 8:36 pm

    Great. But I’m looking for those tabs effect like the one that use flash.
    Is it possible in jquery ?
    For example at http://flashden.net/item/sliding-tabs-widget/8111

    Reply
  5. Adham says:
    September 9, 2009 at 10:42 am

    thank youj very much, it’s a uiseful tutorial ,

    how can I remove the ( soild dot ) that appears in the window ??

    Reply
  6. brydave says:
    September 17, 2009 at 8:23 am

    Thanks for the great tutorial!
    very useful, but anyone have any suggestions for making this work along with lightbox2?

    Reply
  7. ahmad says:
    September 21, 2009 at 8:17 pm

    Clear and clean. You saved hours.

    Thanks.

    Reply
  8. Philippine Outsourcing says:
    September 25, 2009 at 12:20 pm

    thanks for this tuts :) I’ll be using it on my project.

    Reply
  9. Jenny says:
    September 28, 2009 at 12:39 am

    Can anyone give me a hint how to get this script running on WordPress 2.8.4? I have been trying for two days now and can’t figure out how to wrap up the UI-Code, because the jQuery UI libraries are loaded in the footer. If somebody could help me here, i would really, really appreciate that.

    Reply
  10. Tim says:
    September 30, 2009 at 3:53 am

    Hi, The script seems to be disbling the jump to anchor function of the browser. Is there any way to fix this?

    Great tutorial though

    Thanks

    Reply
  11. Tim says:
    September 30, 2009 at 4:11 am

    Oh, I figured it out, it was the toggle fx that was causing it to jump to the top of the page. But the anchor is still not showing in the url bar. Any Ideas?

    Reply
  12. Warren says:
    October 12, 2009 at 1:23 am

    Does anyone know what adjustments would need to make to have all the tabs start off collapsed?

    Reply
  13. Hashmat Abbas says:
    October 21, 2009 at 1:22 am

    Thank You very Much It really Save me For headache of Searching

    Reply
  14. Kris says:
    October 21, 2009 at 4:29 pm

    Woh… I’m trying to learn the ins and outs of jQuery but the last two tuts on it have just confused me more.

    Can someone confirm that this is working with jquery 1.3.2 ?

    I keep getting.. “Result of expression ‘$(‘#tabvanilla’).tabs’[undefined] is not a function.” … same errors on last tut I tried (same topic.. )

    I’ve spent 8 hours on this today… and I’m more confused than when I started!

    Reply
  15. Colorizate! says:
    October 25, 2009 at 6:39 pm

    Very useful! Thanks!!!

    Reply
  16. viswanath says:
    October 26, 2009 at 2:56 am

    hey divya,
    Iam not able to get

    jquery-ui-personalized-1.5.2.packed.js
    sprinkle.js

    files

    how can we use labels,3D tag cloud and archive widgets in single multi tabbed widget

    Reply
  17. Ian says:
    November 2, 2009 at 6:23 am

    Thanks for the great tutorial, I am interested to learn more about jquery and its many functions I can apply to my web development projects

    Reply
  18. Rick says:
    November 3, 2009 at 12:34 pm

    somehow i cant get this to work in IE, all i get is a blank page whenever i load in my html file :(

    Reply
  19. Bruno says:
    November 23, 2009 at 5:32 pm

    I have a conflict with ajax comments for wordpress, it gives me an error (null) on a line of sprinkle!

    Can someone help me on this one?

    Thanks in advance

    Reply
  20. Rohit says:
    November 26, 2009 at 4:30 am

    Very useful help for all.

    Reply
  21. kinza says:
    December 10, 2009 at 1:12 pm

    Hi,
    thanks for ur source code and help to me. i am really greatefull to you.
    kinza

    Reply
  22. tina says:
    December 16, 2009 at 7:14 pm

    you help me alot … thanks for code and demo

    Reply
  23. Kerri Zheng says:
    December 28, 2009 at 11:01 am

    does anyone know how to add to the sprinkle.js file so the page does NOT automatically scroll to the top when you click on each tab??? Thanks.

    Reply
  24. milan says:
    March 2, 2010 at 11:41 pm

    Hi , This Good tab tutorial looking decent, but while implementing in a other page whole page alignment get disturb (get right align) and by removing * {
    margin: 0;
    padding: 0;
    } tab alignment get disturb so kindly give solution for it.

    Thanks

    Reply
  25. Indialike says:
    March 16, 2010 at 11:18 pm

    Very nice and useful tutorials for web designers,
    Thanks for posting.

    Reply
  26. amidude says:
    March 26, 2010 at 11:00 am

    Great tutorial. I do have one question though I thought someone might be able to help me with. How would one target another tab from a link inside the content of any given tab? I have a link that needs to reference the 3rd tab and am having difficulties figuring out how to get the 1st tab to disappear and the 3rd to open. Any suggestions would be most welcomed.

    Reply
  27. Prashant Renge says:
    April 26, 2010 at 2:33 am

    This Good tab tutorial looking decent.
    Thanks for the great tutorial, I am interested to learn more about jquery

    Reply
  28. Casper Valk says:
    May 2, 2010 at 3:41 am

    Thanks so much, this tutorial was so helpfull for me, the code works fine and is very easy to modify.

    Reply
  29. Ness says:
    May 3, 2010 at 8:07 pm

    I’ve tried just the first set of tabs (part A) not the video selector. It works well except that as you click through the tabs and the content rolls up and down, my footer is jumping up an down a bit with it.
    Any suggestions?

    Reply
  30. iPete says:
    May 5, 2010 at 7:20 pm

    works very well, I have been trying to get something going like this and it filled in the blank spaces

    Reply
  31. Dan Harding says:
    May 18, 2010 at 1:06 pm

    How does one change the bounce delay? I like this tab setup but I would prefer to speed up the display of new tabs. It’s too slow. Thanks.

    Reply
  32. @KarmaTiger says:
    July 3, 2010 at 10:29 pm

    Like others on here I’m having trouble getting the .ui-tabs-hide to work – I just get a list showing all 3 tabs as one column, not showing the contents of tab 1 while hiding contents of tabs 2 and 3, for example.

    Reply
  33. nirok says:
    July 7, 2010 at 4:28 pm

    Just wanting to know if its possibly to keep one tab open when a page reloads? so if you have 3 tabs and you select the last tab, if the page reloads that tab stays open… my issue is that i have a form which gets filled out on the 3rd tab and when submit is clicked it reloads the page and goes back to the first tab…

    Reply
  34. blogregator says:
    July 24, 2010 at 7:03 am

    Great tutorial! Thanks!

    Reply
Comment Page 3 of 3 1 2 3

Add a Comment

To add a code snippet to your comment, please wrap your code like so: <pre name="code" class="html">YOUR CODE</pre>. You can replace the class name with "js," "css," "sql," or "php." If there are any "<" or ">" within your code, please search and replace them with: &lt; and &gt; respectively.