title: .slideToggle() on one DIV instead of all others with same class
body: <p>I'm trying to create a menu with DIVs for Appetizers, Soups, etc. I use paragraph tabs as my toggler. All of my togglers have identical classes of "toggle". All of the DIV areas have the same class, "selection." How do I make it so when I click on a toggler, it just reveals the DIV class right above it. Sorry, my coding is messy.</p>
  
  <p>JQuery:</p>
  
  <pre><code>$(document).ready(function(){
  $('.toggle').click(function(){
      $('.selection').slideToggle("slow");
    });&lt;br&gt;
  });
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.selection,.toggle
  {
      width: 700px;
      margin-top: 0px;
      margin-bottom: 0px;
      margin-right: auto;
      marign-lift: auto;
      padding: 5px;
      background: white;
      border: solid 2px gray;
  }
  .toggle
  {
      text-align: center;
  }
  .selection
  {
      display: none;
      text-align: left;
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="selection"&gt;
      Special Appetizer 8.95 &lt;br&gt;
      Small Appetizer Plate 7.50
  &lt;/div&gt;
  &lt;p class="toggle"&gt;Appetizers&lt;/p&gt;
  
  &lt;div class="selection"&gt;
      Broccoli &amp; Cream Soup $5.50 &lt;br&gt;
      Clam Chowder 7.50
  &lt;/div&gt;
  &lt;p class="toggle"&gt;Soups&lt;/p&gt;
  
  &lt;div class="selection"&gt;
      Fried Rice 4.95 &lt;br&gt;
  &lt;/div&gt;
  &lt;p class="toggle"&gt;Rice&lt;/p&gt;
  </code></pre>