Question

I have created tab style interface using css and javascript with only two tabs which is working fine.But i want to add more tabs to it and i am not getting how can i write javascript code for it to show current active tab and its contents and hide all other tabs and their contents

---

Following is my html code :

<div id="container">

    <div id="tabbox">
        <a href="#" id="signup" class="tab signup">Signup</a>
        <a href="#" id="login" class="tab select">Login</a&gt;
    </div>

    <div id="panel">
        <div id="loginbox">Login Form</div>
        <div id="signupbox"&gt;Signup Form</div>
    </div>

</div>

---

This is my javascript code :

$(document).ready(function()
{

    $(".tab").click(function()
    {
        var X=$(this).attr('id');

        if(X=='signup')
        {
            $("#login").removeClass('select');
            $("#signup").addClass('select');
            $("#loginbox").slideUp();
            $("#signupbox").slideDown();
        }
        else
        {
            $("#signup").removeClass('select');
            $("#login").addClass('select');
            $("#signupbox").slideUp();
            $("#loginbox").slideDown();
        }

    });

});

This is working fine for two tabs but if i add more tabs to it say :

<div id="container">

      <div id="tabbox">
          <a href="#" id="signup" class="tab signup">Signup</a>
          <a href="#" id="login" class="tab select">Login</a&gt;
          <a href="#" id="basic" class="tab basicinfo">Basicinfo</a>
          <a href="#" id="contact" class="tab contact info">contactinfo</a>
      </div>

      <div id="panel">
          <div id="loginbox">Login Form</div>
          <div id="signupbox"&gt;Signup Form</div>
          <div id="basicbox">Basic information</div>
          <div id="contactbox">Contact information</div>
      </div>

</div>

Then if i use previous javascript function i will have to add lot more lines to it and i am not getting how can i do it in short and simple way.
What changes do i have to make in my javascript function..

Answer 1

You are mixing ids (that have to be unique – you are using them multiple times) and classes in a weird way (you did before your edit…).

For a basic setup like:

<div id="container">

      <div id="tabbox">
          <a href="#A" class="tab">A</a> <!-- note the URL fragments pointing to actual ids -->
          <a href="#B" class="tab">B</a>
          <a href="#C" class="tab">C</a>
          <a href="#D" class="tab">D</a>
      </div>

      <div id="panel">
          <div id="A" class="tab">A Content</div> <!-- ID attributes are only used once -->
          <div id="B" class="tab">B Content</div>
          <div id="C" class="tab">C Content</div>
          <div id="D" class="tab">D Content</div>
      </div>

</div>​​​​​​​​​​​​​​​​

You could just use some lines of jQuery to get things working:

$('div.tab').hide().first().slideDown(); //show first

$('a.tab').click(function(){
    var targetID = $(this).attr('href'); //store element that triggered the click event
    $('div.tab:visible').slideUp(function(){ //hide visible tab
        $(targetID).slideDown(); //slide down newly selected tab
    });
});​

See a working fiddle

Also read about ids and classes at MDN