siblings in jquery hide everything

Question

This is my html code :

<div id="tabbase">
  <ul>
    <li>a</li>
    <li>b</li>
  </ul>
<div id="tabs-0"></div>
<div id="tabs-1">
  <div class="width50">
    <h5>title1</h5>
    <div class="da-desc">a</div>
    <button>continue</button>
  </div>
  <div class="width50">
  <h5>title2</h5>
  <div class="da-desc">b</div>
  <button>continue</button>
</div>
</div>
</div>

and this is CSS code :

#tabbase {
  margin:16px;
}
#tabbase ul li {
  display:inline-block;
  margin:5px 0px 5px 0;
  background:rgb(224,224,224);
  padding:5px;
  border:1px solid rgb(153,153,153);
  cursor:pointer;
}
#tabs-0, #tabs-1 {
  border:1px solid rgb(153,153,153);
  background:rgb(255,255,255);
  padding:5px;
  margin:-5px 0 0 0;
}
#tabbase ul li.active {
  background:rgb(255,255,255) !important;
}

and this is jquery code :

$(document).ready(function(e) {
  $("#tabs-1").hide(0);
  $("#tabbase ul li:first").addClass("active");
  $("#tabbase ul li").click(function(e) {
    $(this).addClass("active");
    $(this).siblings(this).removeClass("active");
    count = $("#tabbase ul li").index(this);
    $('#tabs-'+count).slideDown(500).siblings(this).slideUp(500);   
  });
});

so you can see that when you click on a tab , all tabs are gone and how can I fix this?

Answer 1

change your line

$('#tabs-'+count).slideDown(500).siblings(this).slideUp(500); 

to

$('#tabs-'+count).slideDown(500).siblings("div").slideUp(500); 

it will work fine. Here is a demo fiddle.

Answer 2

Edit the jQuery Code like this:

$(document).ready(function(e){
  $("#tabs-1").hide(0);
  $("#tabbase ul li:first").addClass("active");
  $("#tabbase ul li").click(function(e) {
    $(this).addClass("active");
    $(this).siblings(this).removeClass("active");
    count = $("#tabbase ul li").index(this);
    $('#tabs-'+count).slideDown(500).siblings("div").slideUp(500);
  });
});

Answer 3

Try this:

$(document).ready(function(e) {
  $("#tabs-1").hide(0);
  $("#tabbase ul li:first").addClass("active");
  $("#tabbase ul li").click(function(e) {
    $(this).addClass("active")
           .siblings().removeClass("active");
    count = $("#tabbase ul li").index(this);
    $('#tabs-'+count).slideDown(500).siblings('[id^="tabs-"]').slideUp(500);   
  });
});

To only slide up the siblings that are the tabs. Otherwise all siblings including your ul will slide up.

Note also that $(this).siblings(this) doesn't make sense, because the argument you pass to siblings() is a filter of the siblings you want to use and this won't be its own sibling.

Demo: http://jsfiddle.net/XtfRt/