Using jQuery to toggle one item at a time
<p>I have a series of divs that are hidden and I would like to be able to toggle their visibility individually.</p>

<p>The HTML:</p>

<pre><code>        &lt;h2&gt;Section One&lt;/h2&gt;
    &lt;p&gt;In luctus ullamcorper urna suscipit fringilla. Nulla facilisi. Curabitur dui nulla, interdum eget vehicula mollis, mollis at quam. Vestibulum scelerisque volutpat tortor, vel euismod nulla cursus quis. Cras quis mattis leo.&lt;/p&gt;
    &lt;input type="button" class="show-video" value="Video" /&gt;
    &lt;div class="video-holder"&gt;&lt;/div&gt;

    &lt;h2&gt;Section Two&lt;/h2&gt;
    &lt;p&gt;In luctus ullamcorper urna suscipit fringilla. Nulla facilisi. Curabitur dui nulla, interdum eget vehicula mollis, mollis at quam. Vestibulum scelerisque volutpat tortor, vel euismod nulla cursus quis. Cras quis mattis leo.&lt;/p&gt;
    &lt;input type="button" class="show-video" value="Video" /&gt;
    &lt;div class="video-holder"&gt;&lt;/div&gt;

    &lt;h2&gt;Section Three&lt;/h2&gt;
    &lt;p&gt;In luctus ullamcorper urna suscipit fringilla. Nulla facilisi. Curabitur dui nulla, interdum eget vehicula mollis, mollis at quam. Vestibulum scelerisque volutpat tortor, vel euismod nulla cursus quis. Cras quis mattis leo.&lt;/p&gt;
    &lt;input type="button" class="show-video" value="Video" /&gt;
    &lt;div class="video-holder"&gt;&lt;/div&gt;
</code></pre>

<p>The jQuery:</p>

<pre><code>&lt;script type="text/javascript"&gt;
   $(document).ready (function() {
     $('.video-holder').hide();
     $('.show-video').click(function () { 
     $('.video-holder').toggle('slow');
    });
   });
&lt;/script&gt;
</code></pre>

<p>I would appreciate some help in getting them to toggle one at a time.</p>

<p>Thanks.</p>
