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?
