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?