title: Show/Hide multiple DIVs with same class name
body: <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>