Question

I’m trying to have a collapsible list of elements, where only one can be seen at any given time.

I set it up like:

<div class="grid_12" id="menu_container">

    <div class="grid_12 title" style="background-color:pink;">
        Book 1
    </div>

    <div class="grid_12 row" style="background-color:white;">
        Chapter 1
        <div class="grid_12 details">Lorem lipsum sin dolor chapter 1</div>
    </div>

    <div class="grid_12 row" style="background-color:white;">
        Chapter 2
        <div class="grid_12 details">Lorem lipsum sin dolor chapter 2</div>
    </div>                                       

</div>​

I tried a lot of things with my javascript function, and ended up lost and confused…
Can anyone please help me out on this?

$(".row").click(function(e){

    $(".current").slideUp(function(){
        $(".current").hide();
        $(".current").removeClass("current");                                                                                    
    });

    $(this).children("div.details").addClass("current");
    $(this).children("div.details").slideDown();

});​

Thanks in advance!
S.

Here’s a JSFiddle version

Answer 1

Something like this?

$(".row").click(function(e){
    var $e = $(this).children();
    if ($e.hasClass('current')) return;

    $(".current").slideUp(function(){
        $(this).removeClass("current");                                        
    });

    $e.addClass("current").slideDown();
});

http://jsfiddle.net/DLFV9/