Toggle DIVs on a page using jQuery

Question

I have a row of links across the top of my page which are meant to act as tabs, when one is clicked I want its DIV to show and the rest to hide. I'm really not sure the best way to go about this.

What I originaly came up with:

$("#overall").click(function(){
 if ($("#overall").is(":hidden"))
 {
  $("#hourly-div").hide("fast");
  $("#daily-div").hide("fast");
  $("#monthly-div").hide("fast");
  $("#overall-div").show("fast");
 }
});

But I found out this doesn't work well at all. Should I be checking if the CSS for the DIV is display: hidden;?

Mark up below.

 <ul class="stats">
  <li><a href="#" id="overall">Overall stats</a></li>
  <li class="sep">|</li>
  <li><a href="#" id="hourly">Hourly Bandwidth</a></li>
  <li class="sep">|</li>
  <li><a href="#" id="daily">Daily Bandwidth</a></li>
  <li class="sep">|</li>
  <li><a href="#" id="monthly">Monthly Bandwidth</a></li>
 </ul>
 <div id="overall-div">
  overall
 </div>
 <div id="hourly-div" style="display: none;">
  hourly
 </div>
 <div id="daily-div" style="display: none;">
  daily
 </div>
 <div id="monthly-div" style="display: none;">
  monthly
 </div>

I wanted the overall div to show when a user loads the page, and the rest to be hidden until a user clicks a tab for them.

Thanks. :)

Answer 1

The best way to go about it is to use jQuery UI and the tabs plugin. If you must implement a tabbed interface yourself, at least look at their code for idea on how to go about it. Note that you don't have to download the entire UI code to use just the tabs. You can make the download smaller by restricting it to just those components that you need.

<div class="tabs">
    <ul class="stats">
            <li><a href="#overall-div" id="overall">Overall stats</a></li>
            <li><a href="#hourly-div" id="hourly">Hourly Bandwidth</a></li>
            <li><a href="#daily-div" id="daily">Daily Bandwidth</a></li>
            <li><a href="#monthly-div" id="monthly">Monthly Bandwidth</a></li>
    </ul>
    <div id="overall-div">
            overall
    </div>
    <div id="hourly-div">
            hourly
    </div>
    <div id="daily-div">
            daily
    </div>
    <div id="monthly-div">
            monthly
    </div>
</div>

<script type="text/javascript">
    $(function() {
        $('.tabs').tabs();  // that's it unless you want to customize
    });
</script>

A nice added bonus to this is that it works just fine if the user has javascript disabled.

Answer 2

Something like:

$('ul.stats a').click(function(e) {
    $('#' + this.id + '-div').show().siblings('[id$=-div]').hide();
    e.preventDefault();
});

Answer 3

Here's how I've done it, add this to a click event:

if(jQuery){
  jQuery('.tab').removeClass('show');
  jQuery('#skills').addClass('show');
  return false;
};

and css:

div.tab {display:none;}
div.show {display:block;}