title: jQuery toggle/slideDown/slideUp not working as expected
body: <p>I am trying to create a toggle button with <code>.details</code>. On first load, it should just display as "Display [+]" with <code>.details-display</code> hidden. When the text is clicked, it should change to "Display [-]" with <code>.details-display</code> slid down. Why isn't this working?</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="slide-caption"&gt;
      &lt;span class="details"&gt;Details[+]&lt;/span&gt;
      &lt;span class="details-display"&gt;The connecting walkway floats above the second story of the Main hall, joining the North and the South wings.&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>$('span.details').toggle(function(){
      $(this).html('Details[-]');
      $(this).parent().find("span.details-display").slideDown("slow");
  }, function() {
      $(this).html('Details[+]');
      $(this).parent().find("span.details-display").slideUp("slow");
  });
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.details-display {
      display: none;
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/xrzcu0na/1/" rel="nofollow">http://jsfiddle.net/xrzcu0na/1/</a></p>