Simple jQuery tabs

22 July 2009| 33 Comments| Print

This tutorial looks into creating a really simple tabbed interface using just plain HTML and CSS with the functionality and interface manipulated using jQuery. Tabbed interfaces are great for maximizing the amount of space you have on your site.

Lets take a look at whats going on. We start with the document ready function. The first line of code hides all the tab containers, we then show the first one, and add the class ‘active’ to the first ‘li’ in the tab headers. Then whenever a tab is clicked it simply remove the class ‘active’ from all the tabs, then add it to the tab thats been clicked. We then take the href from the clicked tab and show it. Simple as that! You can get the complete file by grabbing the download and the demos at the bottom also.

The Code

$(document).ready(function(){
$('#tabs div').hide();
$('#tabs div:first').show();
$('#tabs ul li:first').addClass('active');

$('#tabs ul li a').click(function(){
$('#tabs ul li').removeClass('active');
$(this).parent().addClass('active');
var currentTab = $(this).attr('href');
$('#tabs div').hide();
$(currentTab).show();
return false;
});
});

The HTML

<div id="tabs">

<ul>
<li><a href="#tab-1">This is Tab 1</a></li>
<li><a href="#tab-2">Tab Two</a></li>
<li><a href="#tab-3">Tab Three</a></li>
<li><a href="#tab-4">Tab Four</a></li>
</ul>

<div id="tab-1">

<h3>Tab 1</h3>

<p><img src="http://papermashup.com/demos/jquery-gallery/images/t1.png" width="120" height="120" class="thumbs"/> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur enim. Nullam id ligula in nisl tincidunt feugiat. Curabitur eu magna porttitor ligula bibendum rhoncus. Etiam dignissim. Duis lobortis porta risus. Quisque velit metus, dignissim in, rhoncus at, congue quis, mi. Praesent vel lorem. Suspendisse ut dolor at justo tristique dapibus. Morbi erat mi, rutrum a, aliquam nec, mattis semper, leo. Maecenas blandit risus vitae quam. Vivamus ut odio. Pellentesque mollis arcu nec metus. Nullam bibendum scelerisque turpis. Aliquam erat volutpat.</p>

</div>

<div id="tab-2">

<h3>Tab 2</h3>

<p><img src="http://papermashup.com/demos/jquery-gallery/images/t2.png" width="120" height="120" class="thumbs"/> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur enim. Nullam id ligula in nisl tincidunt feugiat. Curabitur eu magna porttitor ligula bibendum rhoncus. Etiam dignissim. Duis lobortis porta risus. Quisque velit metus, dignissim in, rhoncus at, congue quis, mi. Praesent vel lorem. Suspendisse ut dolor at justo tristique dapibus. Morbi erat mi, rutrum a, aliquam nec</p>

</div>

<div id="tab-3">

<h3>Tab 3</h3>

<p><img src="http://papermashup.com/demos/jquery-gallery/images/t3.png" width="120" height="120" class="thumbs"/> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur enim. Nullam id ligula in nisl tincidunt feugiat. Curabitur eu magna porttitor ligula bibendum rhoncus. Etiam dignissim. Duis lobortis porta risus. Quisque velit metus, dignissim in, rhoncus at, congue quis, mi. Praesent vel lorem. Suspendisse ut dolor at justo tristique dapibus. Morbi erat mi, rutrum a, aliquam nec, mattis semper, leo. Maecenas blandit risus vitae quam. Vivamus ut odio.</p>

</div>

<div id="tab-4">

<h3>Tab 4</h3>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur enim. Nullam id ligula in nisl tincidunt feugiat. Curabitur eu magna porttitor ligula bibendum rhoncus. Etiam dignissim. Duis lobortis porta risus. Quisque velit metus, dignissim in, rhoncus at, congue quis, mi. Praesent vel lorem. Suspendisse ut dolor at justo tristique dapibus. Morbi erat mi, rutrum a, aliquam nec, mattis semper, leo. Maecenas blandit risus vitae quam. Vivamus ut odio. Pellentesque mollis arcu nec metus.</p>

</div>

</div>

demodownload

33 Comments

  • Jake Rocheleau

    Simple is definitely the key word here, fantastic tutorial and very easy to follow.

  • Ben

    Cool, I was looking to do something like this a few days ago. Ended up using the jQuery UI though

  • mahesh

    Nice tutorial,
    Nice demo,
    Can you explain how to implement browser history management for tabs with cookie,
    i am awaiting to your post

  • Simple jQuery tabs | Papermashup.com « Netcrema - creme de la social news via digg + delicious + stumpleupon + reddit

    [...] Simple jQuery tabs | Papermashup.compapermashup.com [...]

  • 22 fresh design and development related links for you ;) « Adrian Zyzik’s Weblog

    [...] Cities The Minimalist – Recipes for 101 Simple Salads for the Season – NYT Simple jQuery tabs Papermashup.com BBC NEWS Technology Artificial brain ‘10 years away’ mixi Top 10 Travel Gadgets Under [...]

  • Richard Francis

    Cool! Thanks for the tut :)

  • Jason Warner

    This one seems more intuitive and clear:

    http://www.sohtanaka.com/web-design/simple-tabs-w-css-jquery/

  • Ashley (author)

    @jason I think you’ll find the code is pretty much exactly the same. but thanks for the link I’m sure people will find it useful :)

  • organizedfellow

    Maybe adding the following:
    a { outline:none; }

    Will help with the tabs showing the outline.

  • web design hastings

    Great simple tab list, will re-work for a site i’m currently working on!

  • Whack Design

    Great post! Thanks for taking the time to write it. I have one question for you, I want some of the ’s in the to actually link to outside links how can I do that?

    Thanks in advance

  • Ashley (author)

    @whackdesign thanks for the comment, didn’t get the question as the code was removed automatically though :(

  • Michael Evangelista

    One Suggestion:
    add the immediate-child > selector to the rules

    $(‘#tabs > div’).hide();
    instead of
    $(‘#tabs div’).hide();

    In case the user wants to put another element inside of one of the tabs.
    Otherwise – perfect, simple, thanks!

  • Michael Evangelista

    That was, another <div> element ;-)

  • Marc Mcleod

    Is it possible to link directly to one of the tabs? E.g. If I wanted to link directly to tab #3 from another page, how could this be achieved?

  • Ashley (author)

    @Marc yeah it would be possible i’d need to dig out an example of that online

  • Vicky

    NICE Graphics..Thanks for the TUT.

  • Dubo.cl » Blog Archive » links for 2009-09-22

    [...] Simple jQuery tabs | Papermashup.com Tabs con jQuery y CSS (tags: css jquery tabs javascript howto tutorial) [...]

  • slacey

    Thanks for this! It’s exactly what I needed and works very well. You said you could dig out an example of linking directly to a certain tab from an outside page. Could you please do that? I really need to do this and can’t find the code for this specific tab system.

    Please and thank you!

  • Ashley (author)

    @slacey here’s an example of jQuery tabs where you can link directly to a specific tab:

    Demo: http://blemble.com/creative/jquery-tabbed-interface/
    Tutorial: http://blemble.com/2009/01/comprehensive-introduction-to-jquery/

    Hope that helps.

    Ash

  • slacey

    Thanks Ashley! I think this will work, although I’m bummed I have to change all my code. Your tabs were so nice and clean!

    But thank you for helping me find this one.

  • Ashley (author)

    @slacey no problem :) depending on your JavaScript knowledge you might be able to edit my tabs to work with the demo i posted.

    at a glance you would need to add the below code:

    // Determine which tab should show first based on the URL hash
    var panelLocation = location.hash.slice(1);
    if(panelLocation){
    var panelNum = panelLocation;
    }else{
    var panelNum = ‘1′;
    }

  • joseph

    thanks for your great example
    I don’t know to to call it in your code? so, i need to access tab-3 from another page ? what can i do to make the page open in this tab?

  • Jacob Miller

    I would like to know if its possible to have scroll bars in jQuery tabs?

  • Ashley (author)

    @Jacob you could just set the contents of the container div to overflow:scroll; with a bit of CSS make sure you set a height on the div and you’ll see the scroll bar on the right.

  • uppercanuck

    Nice work! Has anyone modified the script to fade out a tab on mouseout?

  • wpfeed

    the best jQuery tabs to use!!!

  • audrey

    hello,

    thanks for the tutorial !
    i’m trying to put some columns of text inside the tab-1 but when I use a div inside the tab div it does not appear.

    someone in the forum suggested to write $(’#tabs > div’).hide();
    instead of
    $(’#tabs div’).hide();

    I did it but I still don’t manage to put another div element inside one of the tabs…

    what should I do ?

    thank you for your help,

    audrey

  • Ashley (author)

    @Audrey i cant understand why you’re having problems. If you like you can email me your code to ashley at dotdashcreate dot com and i can take a look for you.

  • Earl P

    @Ashley, nice code! I’m going to replace some spry ish I have right now. I have nested tabs that I need to link to from another page, this should work. I hoping to be able to pass something like: blabla.html?tab=1#TabbedPanels1&#4

    I’ll let you know if it works….
    thanks.
    E.P.

  • Earl P

    @Ashley, It works, but a bit different then I thought.

    the string is blabla.html?tab=1&#4

    One weird thing is that once you pass the string to tab blabla.html?tab=1&#4, I can’t seem to pass to another tab from the url:

    example: if I type in blabla.html?tab=1&#2 from the blabla.html?tab=1&#4 page… it won’t pass. I’m not sure I’ll need to, but something I noticed when playing around with it. nice tutorial.

    -E.P.

  • Twitted by delicious50

    [...] This post was Twitted by delicious50 [...]

  • jQuery: збірка плагінів та туторіалів |Створення сайтів, Seo| Мегаблог

    [...] Simple jQuery tabs — це туторіал (керівництво) по створенні простеньких вкладок. [...]

Leave a comment...

Add your comment below, or trackback from your own site. You can also subscribe to these comments via RSS.

Be nice. Keep it clean. Stay on topic. No spam.

You can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

This is a Gravatar-enabled site. To get your own globally-recognized-avatar, register at Gravatar.