jQuery: Accordion Toggle - Close Div When Sibling is open

advertisements

I've got an accoridan toggle that currently works fine, except I want it so only one item is expanded at a time. When you open one item and go to open another I'd like the original one to close.

Any idea on what I should add to my code to get this to work?

Here's the code:

$(document).ready(function() {

$('.internal').hide();

$('.slider').click(function() {

    $(this).next('.internal').slideToggle();
}).toggle(function() {
    $(this).children("span").html("minus sign");
}, function() {
    $(this).children("span").html("plus sign");
});

});

I set up a fiddle here: http://jsfiddle.net/Lg9Mn/17/

Thanks!


Try this code

$(document).ready(function() {

    $('.internal').hide();

    $('.slider').click(function() {
        $('.internal').not($(this).next('.internal')).hide();
        $('.slider').not($(this)).children("span").html("plus sign");

        if( $(this).next('.internal').is(':visible')){
            $(this).children("span").html("plus sign");
        }
        else{
            $(this).children("span").html("minus sign");
        }
        $(this).next('.internal').slideToggle();
    });
});

Need to add this to your click event

$('.internal').not($(this).next('.internal')).hide();

Check Fiddle