How to make only one accordion slide open at a time

Question

I have a site I'm working on that is all based on accordion style slides. The problem is that the code I used does not close the open slides by default. I need it so that when you click one slide it opens and then when you click another it closes the first slide and so on. I posted all the JS from the page, what can I add to this to make it only allow one slide to be open at a time?

<script> 
if ($(this).scrollTop() > 100) {
$('#up').fadeIn();
} else {
$('#up').fadeOut();
}

$(window).scroll(function(){
if ($(this).scrollTop() > 100) {
$('#up').fadeIn(); 
} else {
$('#up').fadeOut(); 
}
});

$('#up').click(function(){

$('html, body').animate({scrollTop:0}, 800);  
});
</script>

<!-- Menu -->
<script>    
$('.link').click(function() {

var link = $(this).attr('href');
$('html,body').animate({scrollTop: $(link).offset().top - 80}, 800);
});
</script>

<!-- Collapse Toogle -->
<script>      
$('.accordion-toggle').click(function() {

$('html,body').animate({scrollTop: $(this).offset().top - 105}, 800); 
});

Answer 1

You could change the class of the item clicked.

$('.accordion-toggle').click(function() {

    for (c=0;c<$('.collapse').length;c++){
        $("#"+$('.collapse')[c].id).collapse('hide');
    }

    $('html,body').animate({scrollTop: $(this).offset().top - 105}, 800);
});

So when you click at a .menu-item you can get all .menu-item-clicked and change them to close.

Answer 2

jQueryUI has some very useful widgets, including accordions . Please use that, instead of trying to recreate the behavior. (Unless you want to find out how it works, creating something for learning purposes is valid. But then your question should specify that.)