jQuery Tabs

Create A Tabbed Interface Using jQuery

Aug 13th in JavaScript & AJAX by Dan Harper

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!

PG

Author: Dan Harper

This is a NETTUTS contributor who has published 11 tutorial(s) so far here. Their bio is coming soon!

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:

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.


Related Posts

Check out some more great tutorials and articles that you might like

Enjoy this Post?

Your vote will help us grow this site and provide even more awesomeness

Plus Members

Source Files, Bonus Tutorials and
More for $9 a month for all TUTS+
sites in one subscription.

Join Now

User Comments

( ADD YOURS )
  1. PG

    Doug C. August 13th

    Funny, the first time I read about jQuery was when I was searching for ways to implement a sidebar content box for my blog. I believe it was this page: http://docs.jquery.com/Tutorials:Rounded_Corners

    I’m no code guru, but it’s definitely making me want to learn.

    ( Reply )
    1. PG

      KC Hunter October 19th

      Heh, I remember that tutorial. Didn’t work for me too well the first go-around though, but I got it eventually.

      http://www.mind4.com for another jquery tut.

      ( Reply )
  2. PG

    mohsen August 13th

    Very useful! Thanks

    ( Reply )
  3. PG

    Philo August 13th

    Nice Tutorial! Great Job!

    ( Reply )
  4. PG

    Jaswinder Virdee August 13th

    Another simple yet effective use of tabs and jquery
    excellent inspiration for a theme i’m making for themeforest.net
    keep up the good work

    ( Reply )
  5. PG

    James August 13th

    Nice Tutorial! … To be honest, I’ve always thought that the UI library is a bit bloated… I normally just end up creating my own script or plugin which is precisely suited to my needs. Just a note to other readers, you must create real HTML content for the tabs on other pages so that it all degrades nicely. The whole point in unobtrusive javascript is that it enables the page and it’s functionality to degrade gracefully when JavaScript is not available or disabled…

    ( Reply )
  6. PG

    Andrea August 13th

    Hello, nice and great tutorial, as always.

    But how do I make it with cookies?
    Would be nice to have some more tutorial that uses jQuery and cookies.

    ( Reply )
  7. PG

    Razvan August 13th

    Thanks for the great tut, exactly what I need for a new project. :)

    ( Reply )
  8. PG

    Fouad Masoud August 13th

    i have to hand it to u guys. ur the very best.

    respect! loads of respect :D

    ( Reply )
  9. PG

    Jeff August 13th

    How many tutorials on making jQuery tabs do we need? Can’t we get some more diversified tutorials with some information about PHP and other sorts of web related technologies?

    ( Reply )
  10. PG

    Wayne August 13th

    I was looking for something like this for a client project, and I was looking for an excuse to check out jQuery — both served! Thanks again for a great tut.

    ( Reply )
  11. PG

    Dan Harper August 13th

    Thanks for the comments!

    ( Reply )
  12. PG

    pickupjojo August 13th

    Great tip, it looks very easy to use!
    Thanks for sharing!

    Joffrey.

    ( Reply )
  13. PG

    Jonathan August 13th

    I agree with James about making sure it downgrades gracefully. HTML only

    Also I like to turn all components that use js into wordpress widgets or create some if type scenarios and use wp_enqueue_script to call js files only when they are needed. That way I don’t bog down a pageload with bits and bobs it doesn’t need.
    Code Snip-it Example.

    if (is_active_widget(’widget_pb_tabs’)) :
    wp_enqueue_script(’hover_js’, MYJSDIR . $js, array(’jquery’), ‘1.3′);
    etc…
    Also you can use the wp_enqueue_style to pull in css stylesheets in the same sort of way.

    ( Reply )
  14. PG

    koen buysse August 13th

    i allready have a jquery tabber on my site, but this one seems better…
    Time for an update !!!
    nice tut !

    ( Reply )
  15. PG

    Robin August 13th

    The video section is awesome, thanks for the tuts.

    ( Reply )
  16. PG

    Shane August 13th

    There’s a tiny bit of shifting when I change tabs on the li element text, but that’s just me being picky :)

    thanks for posting. Great to see nettuts.com spreading the jQuery word.

    ( Reply )
  17. PG

    Vintage Electric Guitar August 13th

    I have a stunning Vintage Gibson Guitar that takes pride of place in my office (I work from home). And I’ve been known to spend time strumming it when I should be working lol

    ( Reply )
  18. PG

    Corey August 13th

    is any one else getting sick of this generic jQuery bouncing look? there are a few more things that jQuery can do you know….

    ( Reply )
  19. PG

    Dan August 13th

    OMG jQuery FTW!

    ( Reply )
  20. PG

    Ozh August 13th

    Nice tut, but yet another tab interface that, markup wise, sucks. First, an unordered list of titles. Then, content divs relative to each title.

    It would be *much* better to have a markup like:
    TITLE
    content content content content
    TITLE2
    content2 content2 content2 content2
    TITLE3
    content3 content3 content3 content3

    ( Reply )
  21. PG

    Andreas Nieckele August 13th

    So, wasn’t there going to be a new article every wednesday teaching people PHP from scratch?

    At least that’s what was written in the original article:
    http://nettuts.com/php/learn-php-from-scratch-a-training-regimen/

    what happened?

    ( Reply )
  22. PG

    Travis August 13th

    Handy tutorial, but it suffers from the collapse issue when used in Wordpress.

    The second and third tabs display while the page is loading, and only collapse once everything is done.

    Would be nice to see this tutorial updated to automatically hide the additional tabbed content instantaneously.

    ( Reply )
  23. PG

    Ben Griffiths August 13th

    Really good tutorial with a great end effect, thanks :D

    ( Reply )
  24. PG

    Kim August 13th

    Nice to see a tutorial that doesn’t mention Wordpress. Was beginning to think Wordpress == the web.

    ( Reply )
  25. PG

    Joefrey Mahusay August 13th

    Great tabs. I will use this one in the future projects.

    ( Reply )
  26. PG

    insic August 13th

    nice tutorial. another jQuery tutorial that is very useful

    ( Reply )
  27. PG

    Shyamali August 14th

    Another great tutorial…! Thanks a million…

    BTW, I checked in all the browsers… Nice work except IE 5.5… :( Any idea? Pls. help..!

    ( Reply )
  28. PG

    Ash August 14th

    Nice one

    ( Reply )
  29. PG

    Steve August 14th

    I have a problem. I built a tabbed interface, and it works great in FF and IE, but in Opera 9.5 when you click on the tab, it jumps to the anchor. Can someone tell me how to fix this ASAP???

    ( Reply )
  30. PG

    Todd Parker August 14th

    One thing worth mentioning is that is you use the latest jQuery UI components like the tab strip, you can create themes with the themeroller tool instead of having to write all the css from scratch.

    http://ui.jquery.com/themeroller

    If you have your own widgets, it’s possible to use the generic ThemeRoller classes to make your code theme-able with this tool. More info here about the “CSS API” we developed for this:

    http://www.filamentgroup.com/lab/developer_your_own_jquery_themeroller_ready_components/

    ( Reply )
  31. PG

    Thomas August 14th

    It would be nice to see actual coding with regards to jQuery rather than using their canned UI features.

    ( Reply )
  32. PG

    jmbonn August 18th

    Hello

    Is it possible to use a fixed height ? Its seems to be easy to do in the css file (using “height:…), but I do not have scroll bar.

    ( Reply )
  33. PG

    Glen McNiel August 18th

    This is an excellent tutorial. I’ve been trying to figure this out since I first saw the “Structure” Wordpress theme. Love the tabbed interface.

    Thanks so much for the valuable lesson.

    ( Reply )
  34. PG

    etomyam August 18th

    nice one, going to try it now

    ( Reply )
  35. PG

    Asuka August 25th

    I can get this to work with websites not WordPress?! Is it because I’m using wp 2.6?

    ( Reply )
  36. PG

    OrganizedFellow September 1st

    Excellent tutorial NETTUTS!
    jQuery rocks. WordPress sucks. WordPress fanboys suck too.

    ( Reply )
  37. PG

    Asuka September 2nd

    “WordPress fanboys suck too” geez your a nice one. Good luck in your life.

    ( Reply )
  38. PG

    Damir September 7th

    Nice.

    ( Reply )
  39. PG

    ginabot September 8th

    thanks a lot =)
    this is really useful!

    ( Reply )
  40. PG

    mahalie September 9th

    Thanks, implemented this quickly for a little rush site…very easy.
    I’m sure I could figure it out if I RTFM but anyone want to tell me how to include a link in one section to another jquery tab? All my guessing/experimenting is not working so far…

    ( Reply )
  41. PG

    mahalie September 9th

    Wow, I really should just RTFM sometimes…it was so easy.
    Just added this to sprinkle.js

    var $options = $(’#tabset > ul’).tabs(); // first tab selected
    $(’#tab2link’).click(function() { // bind click event to link
    $options.tabs(’select’, 1); // switch to 2nd tab
    return false;
    });

    In this example I add the id ‘tab2link’ to whatever is wrapped around my link that I want to go to this tab.

    ( Reply )
  42. PG

    kamal September 23rd

    Nice tutorial

    ( Reply )
  43. PG

    Ant September 23rd

    Very nice script and tutorial, thanks for letting us all play!

    Ive one tiny problem though: Is there anyway i can make one link target multiple divs? so using the demo above, if i click ‘Popular’ it not only changes the div directly below but also changes the bottom widget to play, say, the clint eastwood div?

    many thanks!

    ( Reply )
  44. PG

    E|Burro September 28th

    Just to say THANKS!. It’s perfect.

    ( Reply )
  45. PG

    HGN September 28th

    I got a problem using two.

    When I’m using 2 in the same page, the second one doesn’t work. Could you help me plase? How Can I do to place two widget in the same page? thanks!!

    ( Reply )
  46. PG

    HGN September 28th

    Fixed it. I add the new tab function to sprinkle.js

    ( Reply )
  47. PG

    Jeramiah October 5th

    How would you use this in a wordpress sidebar ? say i want to switch between my user login, a RSS Feed and featured content in the top side bar above my audio player… can you do that using this?

    cheers
    J

    ( Reply )
  48. PG

    Mário Andrade October 8th

    I’ve been trying to make the tabs work with jCarousel but can’t seem to make things coupe.

    Can’t seem to make jCarousel work with na updated version of jQuery and can’t make jCarousel work with the tabs.

    …help?

    Great tutorial by the way. Keep up the excelent work i’ve been producing

    ( Reply )
  49. PG

    Ewan October 8th

    This is a great tut, but I am just learning Ajax. Does anyone know how I can link with a text link in one tabe to another?
    Please email me at e_arnolda@hotmail.com if anyone can help?
    Thanks in advance

    ( Reply )
  50. PG

    Denis October 16th

    I’m trying to put tabs into tabs .. :S .. but i cant get it right .. a mean that another tabbed menu would appear when you click on one outer tab like ‘recent’ here .. can anyone help me :) ..
    i’m a little new in this ..
    mail me: veqlargh@gmail.com

    ( Reply )
  51. PG

    Denis October 16th

    sorry for previous post .. but i missed the one that HGN posted above ..

    ( Reply )
  52. PG

    Sri Lankan Best SEO October 26th

    Very useful tutorial..!
    Thank you very much…!

    ( Reply )
  53. PG

    Sabrina October 27th

    really nice. this is what i need. its very helpful.

    thanks
    Sabrina
    Bangladesh

    ( Reply )
  54. PG

    Jay November 4th

    This is a really tight tut. Thanks!

    ( Reply )
  55. PG

    Bradley Wint November 17th

    Hey, very nice mod man, but I am having problems integrating it into my blog.

    I am trying to stick it into my sidebar, however when I do that, I get up to the stage where the CSS has an effect over it and styles is, showing the 3 panels one below the other with the appropriately colored borders etc, but I cannot seem to get it to function properly, even though I included both the jQueries and the sprinkle Java code. Any idea what I could be doing wrong?

    ( Reply )
  56. PG

    Ervin Ter November 22nd

    Nice. Thanks a lot.

    ( Reply )
  57. PG

    sew few November 27th

    Very Nice tutz .Keep it up. I boookmark this page.THanx again.

    ( Reply )
  58. PG

    MMA Video Clips December 2nd

    Ive been looking for a way to create tabs for a while now. And Plus, its in Jquery, my favorite JavaScript library.

    Many thanks. Keep posting.

    ( Reply )
  59. PG

    Marcus December 5th

    how how how do i put this into wordpress; do i have to create a new plugin or widget!!! my wordpress keeps breaking everytime i insert it into a sidebar!!!!

    ( Reply )
  60. PG

    Igor December 6th

    “my wordpress keeps breaking”

    i take for my wordpress, look hear http://isle-blog.ru/ (my russian blog). But i can’t doing widget ??? i learn wordpress already about 1 month, if u want, i help u.

    I am just learning Ajax and wordpress – it work diffrent sites, but, i want say: IE8.0 – don’t work this… :( Opera, Mozilla – very good !

    tnx, now i want this paint… :)

    ( Reply )
  61. PG

    Cash For Surveys December 6th

    Great tutorial. Thanks very much. You answered the questions I was wondering about creating a tabbed interface.

    ( Reply )
  62. PG

    rob December 11th

    Great Tutorial!

    Thanks

    ( Reply )
  63. PG

    Credit rapide December 12th

    Really good tutorial! Thanks for sharing.

    ( Reply )
  64. PG

    escabclielm December 27th

    Hi there! I like your website ;)
    If u are looking for Paid Surveys this is the site for you.
    Start advancing your paychecks at http://tinyurl.com/9eeaop

    ( Reply )
  65. PG

    Gregory December 30th

    I am trying to implement this on an asp.net page. On the second tab there is a button which load data into a gridview. After this load the page jumps to the first tab and display the content of the first tab

    What must be done to keep the focus on the second tab and display the content of the second tab after the load?

    ( Reply )
  66. PG

    rzepak January 2nd

    Hi, i’ve got a problem with ui-tabs, it seems to load every link in tab by ajax, and I want to swith it off.. I tried everything and it doesn’t work.. please help

    ( Reply )
  67. PG

    loy January 7th

    I’ve tried the last step but I couldn’t make it look like the finished product. Can anyone please help me? Could other scripts affect it? I also used JDGallery.

    ( Reply )
  68. PG

    Anna January 13th

    TWO TABBED INTERFACES ON THE SAME PAGE
    Could someone please let me know how to do this? As someone mentioned before, the first tabbed interface appears and functions normally, but the second does not. Apparently adding a new function to one of the js files solves this problem, but I have no idea how to do this.

    So, um, please help!

    What code do I have to put into what js file in order to make this work?

    ( Reply )
    1. PG

      Arpit Tambi March 9th

      jQuery

      $(”#tabs”).tabs();
      $(’#showcase > ul’).tabs();
      $(’#tabs’).bind(’tabsshow’, function(event, ui) {
      if (ui.panel.id == “tabs-1″) {
      $(’#showcase > ul’).tabs();
      });
      ——————
      HTML

      Nunc tincidunt
      Proin dolor
      Aenean lacinia

      Latest
      Recently Popular
      Most Views

      Sub Tab 1

      Sub Tab 2

      Sub Tab 3

      Tab 2 content

      Tab 3 content

      Now add styling. You need jQuery UI styles from their custom download page.

      ( Reply )
      1. PG

        Arpit Tambi March 9th

        oops… this is the html

        Nunc tincidunt
        Proin dolor
        Aenean lacinia

        Latest
        Recently Popular
        Most Views

        Sub Tab 1

        Sub Tab 2

        Sub Tab 3

        Tab 2 content

        Tab 3 content

  69. PG

    zplits January 18th

    Can this be added on wordpress 2.7?

    ( Reply )
  70. PG

    elChe January 30th

    I tried this with the newest version of jquery and it didn’t work. I had to download your jquery files for this to work. Is it possible that I didn’t get the right personalized version?

    ( Reply )
  71. PG

    elChe January 30th

    Also,

    I’m using swfobject on one of my tabs, it works correctly in IE, but the tab closes THEN the swfobjects disappear. How can I make them dissappear first?

    ( Reply )
  72. PG

    Vintage Acoustic Guitar February 13th

    Hai guys this is a quite conversational place i tink…if you guys interested in guitars visit my blog

    ( Reply )
  73. PG

    Rene Merino February 14th

    This apparently works on wp 2.7.1 on my local sever but not online, it says that is null or the source is not defined, any reasons why?

    ( Reply )
  74. PG

    Zander Martineau February 20th

    If you need to implement the jQuery UI Tabs into a Textpattern site, check my post over at the Textpattern Support Forum- http://forum.textpattern.com/viewtopic.php?pid=201102#p201102

    ( Reply )
  75. PG

    griefex March 25th

    Great tutorial!

    ( Reply )
  76. PG

    rick April 13th

    as elChe said

    “I tried this with the newest version of jquery and it didn’t work. I had to download your jquery files for this to work. Is it possible that I didn’t get the right personalized version?”

    Any one have any ideas?

    ( Reply )
  77. PG

    HNEP April 15th

    Im trying to use some kind of tabbed interface in my blog with wordpress, but everytime i used, the tabbed didnt work.

    can someone help me?

    ( Reply )
  78. PG

    WebDevVote.com April 16th

    You are voted!
    Track back from WebDevVote.com

    ( Reply )
  79. PG

    lane April 24th

    how would you change the speed of the animation?

    ( Reply )
  80. PG

    Fred April 28th

    How can I use nested tabs? I add the second tabs to the sprinkle.js and although they appear fine, they don’t actually load any content inside of them…

    help please …

    ( Reply )
  81. PG

    CgBaran Tuts May 5th

    Great Work Thanks

    ( Reply )
  82. PG

    Swayne May 8th

    Why isn’t this working with jquery-ui-1.7.1 … ?

    ( Reply )
    1. PG

      Necati May 11th

      Hey Swayne,

      I had the same problem. Apparently with 1.7.1 , there is no need to use the “ul” element in the sprinkle.js code anymore.

      So instead of:
      $(’#tabvanilla > ul’).tabs({ fx: { height: ‘toggle’, opacity: ‘toggle’ } });

      yuu would use:
      $(’#tabvanilla).tabs({ fx: { height: ‘toggle’, opacity: ‘toggle’ } });

      Cheers.

      ( Reply )
      1. PG

        Alex Leonard June 12th

        @Necati

        That’s perfect! I was just wondering why things had broken after upgrading to WP2.8.

        Just to clarify you’re missing an apostrophe in that code.

        $(’#tabvanilla’).tabs({ fx: { height: ‘toggle’, opacity: ‘toggle’ } });

        Very minor thing, but in case that throws someone off :)

        Cheers,

        Alex

      2. PG

        Dan B. Lee June 22nd

        This just saved me. Thanks.

  83. PG

    Rishi May 10th

    Very helpful! I’ll be implementing this on my site soon as a replacement for Tabber.

    ( Reply )
  84. PG

    Charles May 13th

    Awesome! Just starting to dip my toe into the PHP world and this helped me greatly.

    - Charles

    ( Reply )
  85. PG

    Mary May 24th

    great tut and great js!..i’ve only question: is it possible, and how, having horizontal scroller?
    Thannks!

    ( Reply )
  86. PG

    V.C May 27th

    Your tip is interesting.
    You know, I tried using tabbed widgets plugin but it doesn’t work. I was so upset at that time.
    I was wondering if I can create a plugin to add tab in sidebar :)

    ( Reply )
  87. PG

    Synergy Informatics Web Solutions May 27th

    Nice tutorial… exactly what we’re looking for…

    ( Reply )
  88. PG

    Trisha June 5th

    this is RAD! seriously pro… and the only one that works! thanks!

    ( Reply )
  89. PG

    Jed Rose June 6th

    Thank you this is much appreciated. Easy to follow.

    ( Reply )
  90. PG

    ktsixit June 10th

    that’s a great tutorial, congratulations! can I make it work on mousehover event and not on click?

    ( Reply )
  91. PG

    Manu June 12th

    Doesn’t with the latest Firefox 3.5 beta (3.5b99) :(

    Hop this problem problem will have been fixed with the officiel release of Firefox 3.5 !

    ( Reply )
  92. PG

    Dennis June 17th

    For some reason locally everything works fine but as soon as I use it on my website it doesn’t work anymore. It says Error: ‘null’ is null or not an object (in IE7, in Firefox no error but it just loads the DIVs on the page without hiding them). I can’t figure this out :(

    ( Reply )
  93. PG

    Baby Gender Predictor June 23rd

    Nice tutorial Dan – I feel I could give this a go now….

    ( Reply )
  94. PG

    Baby Gender Predictor July 2nd

    Are there any follow-up tutorials planned?

    ( Reply )
  95. PG

    TopFreewareDownload.com July 4th

    Very nice idea ….

    ( Reply )
  96. PG

    shimul July 10th

    your live demo( video things) is not working on my ie6 and ie7 :-S . when I play the video and switch it , but still running the video. shows only on ie browser.

    (http://nettuts.s3.amazonaws.com/042_jQueryUITabs/demo/index.html)

    ( Reply )
    1. PG

      ralpy October 24th

      Does anyone know how to fix this?

      ( Reply )
  97. PG

    Symon July 14th

    Just what i was loking for. Thx.

    ( Reply )
  98. PG

    Ganesh July 28th

    i just try for the tabbed UI and everything is going smoothly but at end when i refresh the page, all the tabs remains in flat view….all are visible.

    what should i do?

    ( Reply )
  99. PG

    Harry August 5th

    Thanks a lot. You saved me tons of time. Keep it up.

    ( Reply )
  100. PG

    vivaelhuano August 5th

    great men !!! you save me a lot of time !!! ;)

    thanks !!!

    ( Reply )
  101. PG

    donald August 29th

    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 )
  102. PG

    Josh August 31st

    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 )
  103. PG

    Rod August 31st

    Great information. Thanks for

    ( Reply )
  104. PG

    Leo September 2nd

    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 )
  105. PG

    Adham September 9th

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

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

    ( Reply )
  106. PG

    brydave September 17th

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

    ( Reply )
  107. PG

    ahmad September 21st

    Clear and clean. You saved hours.

    Thanks.

    ( Reply )
  108. PG

    Philippine Outsourcing September 25th

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

    ( Reply )
  109. PG

    Jenny September 28th

    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 )
  110. PG

    Tim September 30th

    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 )
  111. PG

    Tim September 30th

    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 )
  112. PG

    Warren October 12th

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

    ( Reply )
  113. PG

    Hashmat Abbas October 21st

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

    ( Reply )
  114. PG

    Kris October 21st

    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 )
  115. PG

    Colorizate! October 25th

    Very useful! Thanks!!!

    ( Reply )
  116. PG

    viswanath October 26th

    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 )
  117. PG

    Ian November 2nd

    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 )
  118. PG

    Rick November 3rd

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

    ( Reply )

Add Your Comment

( GET A GRAVATAR )
  1. Arrow
    Gravatar

    Your Name
    November 3rd