Help with toggle all functionality
<p>I have a list where each element can be toggled open and closed like this</p>

<p>The list is like this:</p>

<pre><code>&lt;h2 class="siteDesSubTrigger"&gt; &lt;a href="#"&gt;Trigger&lt;/a&gt;&lt;/h2&gt;
&lt;div class="siteDesSubBlock" style="display: none;"&gt;
&lt;ul&gt;    
&lt;li&gt;
Sub Content
&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>The jQuery is like this</p>

<pre><code>$("h2.siteDesSubTrigger").click(function(){
    $(this).toggleClass("active").next().slideToggle("slow");
    return false; 
    }); 
</code></pre>

<p>I need to also add a Expand All/ Collapse All switch but I am having troubles getting this to work properly.  This is what I have so far </p>

<pre><code>$("h2.expandAll").click(function(){
    $(this).toggle(function() {
    $("h2.expandAll").text("Collapse All");
    }, function(){
    $("h2.expandAll").text("Expand All");
    });

    $(this).toggleClass("active");
    $(".siteDesSubBlock").toggle();
    });
</code></pre>

<p>but it is really buggy.. like if a panel is already expanded it will close it while opening the rest and.. well it basically doesnt work :P.  Can someone please help me with the proper way to write this function?</p>
