Jquery: slideToggle() multiple divs independently using one function
<p>Markup:</p>

<pre><code>&lt;div&gt;
    &lt;h3 class = "trigger"&gt;Heading 1&lt;/h3&gt;
    &lt;ul class = "toggle"&gt;
        &lt;li&gt;Line One&lt;/li&gt;
        &lt;li&gt;Line Two&lt;/li&gt;
        &lt;li&gt;Line Three&lt;/li&gt;
    &lt;/ul&gt;
&lt;/div&gt;
&lt;div&gt;
    &lt;h3 class = "trigger"&gt;Heading 2&lt;/h3&gt;
    &lt;ul class = "toggle"&gt;
        &lt;li&gt;Line One&lt;/li&gt;
        &lt;li&gt;Line Two&lt;/li&gt;
        &lt;li&gt;Line Three&lt;/li&gt;
    &lt;/ul&gt;
&lt;/div&gt;
</code></pre>

<p>and the JQuery:</p>

<pre><code>$(".toggle").slideUp();
$(".trigger").click(function(){
    $(".toggle").slideToggle("slow");
  });
</code></pre>

<p>I'd like to be able to toggle these <code>&lt;ul&gt;</code>s independently. Currently, when either <code>&lt;h3&gt;</code> title is clicked both divs toggle...</p>

<p>code is at: <a href="http://jsfiddle.net/CPvCZ/4/" rel="nofollow">http://jsfiddle.net/CPvCZ/4/</a></p>
