Jquery close toggle when other toggle is open
Jquery close toggle when other toggle is open
HTML
<div id="header">
<div class="slide2"><a class="slide-btn2" href="#"></a>
</div>
<div class="slide1"><a class="slide-btn1" href="#"></a>
</div>
</div>
<div id="panel2">
</div>
<div id="panel1">
</div>
CSS
#header{
height: 30px;
background: #000;
}
.slide1 {
float:left;
}
.slide2 {
float:left;
}
.slide-btn1 {
width: 37px;
height: 30px;
padding: 0px 0px 0 0;
margin: 0 auto;
display: block;
color: #fff;
border-right: 1px solid #fff;
background:#000 url('http://i80.photobucket.com/albums/j187/pukau/plus-1.png') no-repeat;
}
.slide-btn1.active {
background:#000 url('http://i80.photobucket.com/albums/j187/pukau/minus.png') no-repeat;
}
.slide-btn2 {
width: 37px;
height: 30px;
margin: 0 auto;
display: block;
color: #fff;
border-right: 1px solid #fff;
background:#000 url('http://i80.photobucket.com/albums/j187/pukau/plus-1.png') no-repeat;
}
.slide-btn2.active {
background:#000 url('http://i80.photobucket.com/albums/j187/pukau/minus.png') no-repeat;
}
#panel1 {
position: absolute;
top: 30px;
display: none;
background: #f6a030;
width: 100%;
height: 200px;
z-index:999;
}
#panel2 {
background: #30f663;
height: 300px;
display: none;
position:relative;
}
JavaScript
$(document).ready(function(){
$(".slide-btn1").click(function(){
$("#panel2").slideUp("fast");
$('.active').removeClass('active');
$("#panel1").toggle("fast");
$(this).toggleClass("active");
return false;
});
$(".slide-btn2").click(function(){
$("#panel1").slideUp("fast");
$('.active').removeClass('active');
$("#panel2").slideToggle("slow");
$(this).toggleClass("active");
return false;
});
});