javascript hide/show tabs using JQuery

Question

Hey all, I have a quick question of how I can use jquery tabs (you click on link button to display/hide certain divs). The div id matches the href of the link:

HTML links:

<table class='layout tabs'>
<tr>
  <td><a href="#site">Site</a></td>
  <td><a href="#siteno">Number</a></td>
</tr>
<tr>
  <td><a href="#student">Student</a></td>

  <td><a href="#school">School</a></td>
</tr>
</table>
</div>

div that needs to display/hide:

<div id="site">
  <table class='explore'>
    <thead class='ui-widget-header'>
      <tr>
        <th class=' sortable'>
          Site
        </th>

        <th class=' sortable'>
          Number
        </th>
        </tr>
        </thead>
        </table>
</div>

Thanks for any response.

Answer 1

$("table.tabs a").click( function() {
    var id = $(this).attr( "href" );
    var div = $(id);
    div.toggle();
} );

This will get you exactly what you're asking. However, I suspect that you also want to hide all other divs when one div is shown. True?

Ok, now that you've responded that it's true, here's your new code. You also should add a class (in my code - "tab-div") to all your DIVs, in order to have them easily selectable all together.

$("table.tabs a").click( function() {
    var id = $(this).attr( "href" );

    // Hide all the tab divs
    $(".tab-div").hide(); 

    // Then show the one that's been clicked
    $(id).show();
} );