Grow your CSS skills. Land your dream job.

jQuery UI Tabs with Next/Previous

Published by Chris Coyier

Tabbed areas are lovely, but when you start getting to more than 3 or 4 different tabs, they start to get a little crowded and it makes sense to provide alternative navigation of them. I think it makes sense to supply universally located Next/Previous buttons, so without even moving your cursor you can click through each of them.

View Demo   Download Files

jQuery UI makes creating tabbed areas very easy, so the framework is based on that. But we are on our own as far as Next/Previous buttons. Fortunately, jQuery UI tabs do have a function-thing that can be called to switch tabs. We can bind it to text links to accomplish switching tabs:

$('#my-text-link').click(function() { // bind click event to link
    $tabs.tabs('select', 2); // switch to third tab
    return false;
});

But we want to do this (hopefully) as smart-ly as we can. So we want to:

  • Add the links dynamically to each panel. If a panel is added or removed, the Next/Previous buttons automatically adjust to the new flow. Plus, links won't be there awkwardly with JavaScript disabled
  • Make sure there is no "Previous" button on the first panel
  • Make sure there is no "Next" button on the last panel

This is how I did it:

$(function() {

	var $tabs = $('#tabs').tabs();
	
	$(".ui-tabs-panel").each(function(i){
	
	  var totalSize = $(".ui-tabs-panel").size() - 1;
	
	  if (i != totalSize) {
	      next = i + 2;
   		  $(this).append("<a href='#' class='next-tab mover' rel='" + next + "'>Next Page &#187;</a>");
	  }
	  
	  if (i != 0) {
	      prev = i;
   		  $(this).append("<a href='#' class='prev-tab mover' rel='" + prev + "'>&#171; Prev Page</a>");
	  }
   		
	});
	
	$('.next-tab, .prev-tab').click(function() { 
           $tabs.tabs('select', $(this).attr("rel"));
           return false;
       });
       

});

Comments

  1. I was implementing something like this on a client’s site today. This is a much better solution. Thanks!

  2. Permalink to comment#

    I use another version of tab-based content; but I really like this inclusion of previous / next. I wonder though… if there is a way to have the previous / next buttons instead take on the title of the tab they are navigating to.

    In terms of user-friendly navigation, that would be the most comprehensive option – users would know exactly where they were going using either the prev / next tab options, or the upper navigation.

    • That would be a clever idea, I’ll look into that, I’m sure it’s possible.

    • Branden Silva
      Permalink to comment#

      I like the idea of that Rob. I need a solution that allows me to have names for the tabs. Then It’s more like a walk through with semantic writing that a user can understand. After all who knows which information is associated with which #.

      It would avoid the: “Crap I messed up on the contact form… Uhh which number was it it again? click click click click.”

  3. Permalink to comment#

    Take a look at this demo in IE 7. The Next/Previous tabs are out of whack. Other than that thanks for the code!

  4. Permalink to comment#

    thanks for sharing

  5. Wouldn’t it be better to do this in php instead? Since its almost the same solution but better for screen readers and browsers that don’t use js? Less debugging too..

    But otherwise a nifty solution if that is what your looking for, thanks Chris :)

  6. Permalink to comment#

    not working in IE7 I think you need to add
    .ui-tabs .ui-tabs-panel {overflow:auto} I think that will fix the bug. Not tested though

    • Permalink to comment#

      so I have done some testing and I have found a few different ways to make it work. you can float the display left and add a width of 100%. The only problem is that you need to set a static height to get this to work. I also tried to put a div wrap around it and to create the need space didn’t work very well. then I tried to hack it by adding padding to the div that was wrapping the display that worked but made the space pretty large in FF. well I am done playing around with this and would love to hear how this prob gets fixed. it is probably a Little one line fix that I didn’t think to try well thanks as always Chris.

  7. Abydos641
    Permalink to comment#

    I was playing with this in Firefox 3, very awesome, but it alternates between horizontal/vertical scrolls on and off, even if there is no content change between tabs. Otherwise it’s a grand tutorial!

  8. Permalink to comment#

    Thanks for this.

    Quick question, how would you add a fading animation to the content when the tabs change.

  9. Permalink to comment#

    Great post, tabs are the most used web interface on the web these days. Thnx for sharing

  10. Permalink to comment#

    Thanks Chris!
    It’s nice effect

  11. Guillaume
    Permalink to comment#

    Nice idea.

    If you want to use only two links outside of the tabs instead of adding the next & previous links in each tab you can also use $tabs.data(‘selected.tabs’); to retrieve the index of the currently selected tab, and use the ‘tabsselect’ event to enable / disable the links.

  12. This solutions makes sense…
    thanks for the idea!!!

  13. Permalink to comment#

    The solution is elegant indeed. Thank you for the post.

  14. i like this thank you

  15. ellisgl
    Permalink to comment#

    I was hoping for a ExtJS style tab

  16. Problem is that hiding content like this is actually bad for user experience if one comes from a search engine searching for hidden content. I wrote a blog post about it a few months ago:
    A fundamental problem with Ajax websites and hiding content

    also you face an accesibility problem for people with javascript turned off unless you use the css preloaded technique
    CSS Preloaded

  17. JP
    Permalink to comment#

    Nice solution!
    My only recommendation is to declare the variables ‘i’, ‘next’ and ‘prev’ with var. Since those aren’t declared with var they’re put into the global namespace.

  18. Really thankful for this elegant solution. it will be pretty when you add images on each tab.

  19. manal
    Permalink to comment#

    thanks a lot , but can I increase the content width inside the tab.

  20. Mahesh Vemuri
    Permalink to comment#

    Moreover select is deprecated now. So we have to use “active “parameter for getting and setting active tab

    Here is JS part of the code:

    $(document) .ready(function() {
        $("#tabs").tabs(); 
        $(".btnNext").click(function () {
                $( "#tabs" ).tabs( "option", "active", $("#tabs").tabs('option', 'active')+1 );
            });
            $(".btnPrev").click(function () {
                $( "#tabs" ).tabs( "option", "active", $("#tabs").tabs('option', 'active')-1 );
            });
    });
    

    you should have “a href” tags to be added in your tabs div with “btnPrev” and “btnNext” Classes

  21. deedee
    Permalink to comment#

    hello everybody i’m having a problem could you me sir?

    i put this ui-tabs inside of “spry tabbed panels” the 1st tab it words great

    but the others tabs have an error.. it is not working =(

    please help me thank you in advance

  22. There are so many tabs, but I think the Jquery UI Tabs’s best for me. Thanks for your TUT

  23. Ata

    How can I do it automatically for example every 5 seconds?

    Thanks

  24. Deep

    Its is working fine. Its a lovely. I am loving it.

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".