Show/Hide multiple DIVs with same class name
<p>I'm looping through a resultset which produces the following HTML:</p>

<pre><code> &lt;tr&gt;
    &lt;td class="optionItems"&gt;
        Test&lt;br /&gt;
        Test&lt;br /&gt;
        &lt;a href="#" class="description" &gt;
            &lt;img src="../../Images/Magnifying-Glass-icon.png"/&gt;&amp;nbsp;Description
        &lt;/a&gt;
    &lt;/td&gt;

    &lt;td colspan="2" class="optionItemsLast"&gt;
        &lt;input type="submit" value="Book" class="buttonGreen" /&gt;
    &lt;/td&gt;
&lt;/tr&gt;

&lt;tr&gt;
    &lt;td colspan="3" class="optionItems"&gt;
        &lt;div class="slidingDiv"&gt;
            Test&gt;&lt;br /&gt;
        &lt;/div&gt;
    &lt;/td&gt;
&lt;/tr&gt;
</code></pre>

<p>I have the following jQuery code to show/hide the div with the class name "slidingDiv":</p>

<pre><code> $(".slidingDiv").hide();
        $(".description").show();

        $('.description').click(function () {
            $(".slidingDiv").slideToggle();
        });
</code></pre>

<p>When I click on any of the links with the "description" class name, all the divs show. I just want to only show the div corresponding the "description" link I clicked on.</p>

<p>I've tried something like this:</p>

<pre><code>$('.description').click(function () {
            $(this).parent().children(".slidingDiv").slideToggle();
            //$(".slidingDiv").slideToggle();
        });
</code></pre>

<p>But with no success. Any help would be appreciated.</p>
