JQuery Accordion Style List
<p>I'm trying to have a collapsible list of elements, where only one can be seen at any given time. </p>

<p>I set it up like:</p>

<pre><code>&lt;div class="grid_12" id="menu_container"&gt;

    &lt;div class="grid_12 title" style="background-color:pink;"&gt;
        Book 1
    &lt;/div&gt;

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

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

&lt;/div&gt;​
</code></pre>

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

<pre><code>$(".row").click(function(e){

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

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

});​
</code></pre>

<p>Thanks in advance!
S.</p>

<p><a href="http://bit.ly/VPpryU" rel="nofollow" title="JSFiddle">Here's a JSFiddle version</a></p>
