Selecting multiple divs individually
<p>I have this markup:</p>

<pre><code>&lt;h3 id="btn-1"&gt;Content Title&lt;/h3&gt;
&lt;ul&gt;&lt;li&gt;Some Content&lt;/li&gt;&lt;/ul&gt;
...stuff here and further down the page... 
&lt;h3 id="btn-2"&gt;Content Title 2&lt;/h3&gt;
&lt;ul&gt;&lt;li&gt;Some content 22&lt;/li&gt;&lt;/ul&gt;
</code></pre>

<p>The content in the unordered list is supposed to drop down when "h3" is clicked and also append a class to h3 so as to create a style based on the open/close state. So I have this which is working as I want:</p>

<pre><code>    $("#btn-1, #btn-2").attr('class','inactive');
    $("#btn-1").click(function (){
    if ($("#btn-1 + ul").is(":hidden")) {
            $("#btn-1 + ul").slideDown("slow"),$("#btn-1").attr('class','active');
                } else {
            $("#btn-1 + ul").slideUp('slow'),$("#btn-1").attr('class','inactive');
        }
    }); 


    $("#btn-2").click(function (){
        if ($("#btn-2 + ul").is(":hidden")) {
            $("#btn-2 + ul").slideDown("slow"),$("#btn-2").attr('class','active');
                } else {
            $("#btn-2 + ul").slideUp('slow'),$("#btn-2").attr('class','inactive');
        }
    }); 
</code></pre>

<p>I was looking for a more efficient way to write the code and I came up with this but it applies the animation to all the containers at the same time. </p>

<pre><code>    $("h3[id^='btn-']").attr('class','inactive');
    $("h3[id^='btn-']").click(function (index){
        if ($("h3[id^='btn-'] + ul").is(":hidden")) {
            $("h3[id^='btn-'] + ul").slideDown("slow"),$("h3[id^='btn-']").attr('class','active');
                } else {
            $("h3[id^='btn-'] + ul").slideUp('slow'),$("h3[id^='btn-']").attr('class','inactive');
        }
    }); 
</code></pre>

<p>So my question is, is there a better way to reduce the code in the first working solution? 
Thanks.</p>
