title: jQuery - using .slideToggle to toggle ONLY ONE thing at a time
body: <p>All I want is for each list to toggle in and out when you click the span that precedes it. What happens now is that clicking one span toggles all the lists. I'm a jQuery beginner, but I feel like this is a really simple thing to do, so I'm frustrated that I can't figure it out. Also, there will be a LOT of these on the page, so I don't want to have to add a bunch of code for each new list.</p>
  
  <p>This is my HTML:</p>
  
  <pre><code>&lt;span class="rental"&gt;123 Main Street&lt;/span&gt;
  &lt;ul class="rental-det"&gt;
      &lt;li&gt;2 bedrooms&lt;/li&gt;
      &lt;li&gt;1 bathroom&lt;/li&gt;
      &lt;li&gt;New carpets throughout&lt;/li&gt;
      &lt;li&gt;All large kitchen appliances included&lt;/li&gt;
      &lt;li&gt;In-unit washer and dryer&lt;/li&gt;
      &lt;li&gt;Central air&lt;/li&gt;
      &lt;li&gt;Dishwasher&lt;/li&gt;
      &lt;li&gt;Renter responsible for all utilities&lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;span class="rental"&gt;321 Main Street&lt;/span&gt;
  &lt;ul class="rental-det"&gt;
      &lt;li&gt;2 bedrooms&lt;/li&gt;
      &lt;li&gt;1 bathroom&lt;/li&gt;
      &lt;li&gt;New carpets throughout&lt;/li&gt;
      &lt;li&gt;All large kitchen appliances included&lt;/li&gt;
      &lt;li&gt;In-unit washer and dryer&lt;/li&gt;
      &lt;li&gt;Central air&lt;/li&gt;
      &lt;li&gt;Dishwasher&lt;/li&gt;
      &lt;li&gt;Renter responsible for all utilities&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>So, again, I want to be able to click each span with a class of "rental" and toggle the list that immediately follows it.</p>
  
  <p>Here is the jQuery I have been using:</p>
  
  <pre><code>$(document).ready(function(){
  $('.rental').click(function() {
  $('.rental-det').slideToggle()
  });
  }); 
  </code></pre>
  
  <p>I have also added <code>display: none;</code> to the .rental-det class to make them hidden by default.</p>