SO? comment demo: What code do i need to collapse a div when another is open?
http://stackoverflow.com/questions/5148075/what-code-do-i-need-to-collapse-a-div-when-another-is-open/5148190#5148190
HTML
<div class="category">A
<ul class="artists"><li>Apple</li><li>Ace</li><li>Ants</li></ul>
</div>
<div class="category firstShown">B
<ul class="artists"><li>Bee</li><li>Bop</li><li>Book</li></ul>
</div>
<div class="category">C
<ul class="artists"><li>Cake</li><li>Chimp</li><li>Charles</li></ul>
</div>
<!--Simple Implementation and dependancies-->
<a id="prev" href="#">Prev</a>
<a id="next" href="#">Next</a>
<a href="#2">2</a>
CSS
div { width: 300px; margin-bottom: 30px; cursor: pointer; }
.category { background: lightblue; }
.artists { margin-left: 30px; display: none; }
div > div {
font-size:5em;
width:auto;
text-align:center;
padding:20px 0;
display:none;
}
JavaScript
$(".category").click(function() {
$(this).children(".artists").show();
$(this).siblings(".category").find(".artists").hide();
}).filter(".firstShown").click();
$(function(){
//Reference Object
var $divs = $('div > div');
//Buffer for selected variable
var $selected = 0;
//Show first
$divs.eq(0).show();
$('#next').click(function(){
//Update selected var
$selected = $divs.filter(':visible');
//Save next to variable
var $next = $selected.next();
//Change Visibility
toggle($next);
//Prevent Default
return false;
});
$('#prev').click(function(){
$selected = $divs.filter(':visible');
var $prev = $selected.prev();
toggle($prev);
return false;
});
$('a').click(function(){
$selected = $divs.filter(':visible');
var selector = $(this).attr('href');
if(selector == '#') return false;
toggle( $( selector ) );
return false;
});
var toggle = function($toggle){
if(!$toggle.length) return false;
$selected.hide();
//for fun
$toggle.fadeIn();
//$toggle.show();
}
});