title: How to fix this jQuery SlideToggle?
body: <p>What I'm trying to do is independently slidetoggle text divs under a row of images when those images - in a dl/dt gallery - are clicked, like so:</p>
  
  <p><img src="https://i.stack.imgur.com/hbspT.png" alt="dl and dt gallery"></p>
  
  <p>But of course I'm doing at least a few things wrong. Could be complicated that the markup is in a jQuery Tab, but that may not be the case. <strong>jsfiddle here:</strong> <a href="http://jsfiddle.net/Yfs2V/8/" rel="nofollow noreferrer">http://jsfiddle.net/Yfs2V/8/</a></p>
  
  <p>I think the function is problematic:</p>
  
  <p><strong>jQuery function:</strong></p>
  
  <pre><code>$(".bkcontent").hide();
  $("#bookimggallery dt").click(function() {
      $(".bkcontent").hide();
  $(this).parent().children(".bkcontent").slideToggle(500); });
  </code></pre>
  
  <p><strong>the HTML:</strong></p>
  
  <pre><code>&lt;div id="bookimggallery"&gt;
  
      &lt;dl class="gallery"&gt;&lt;dt&gt;&lt;img alt="img" src=""&gt;&lt;/dt&gt;
          &lt;dt&gt;Image Title One&lt;/dt&gt;&lt;/dl&gt;
  
      &lt;dl class="gallery"&gt;&lt;dt&gt;&lt;img alt="img" src=""&gt;&lt;/dt&gt;
          &lt;dt&gt;Image Title Two&lt;/dt&gt;&lt;/dl&gt;
  
      &lt;dl class="gallery"&gt;&lt;dt&gt;&lt;img alt="img" src=""&gt;&lt;/dt&gt;
          &lt;dt&gt;Image Title Three&lt;/dt&gt;&lt;/dl&gt;
  
      &lt;dl class="gallery"&gt;&lt;dt&gt;&lt;img alt="img" src=""&gt;&lt;/dt&gt;
          &lt;dt&gt;Image Title Four&lt;/dt&gt;&lt;/dl&gt;
  
      &lt;dl class="gallery"&gt;&lt;dt&gt;&lt;img alt="img" src=""&gt;&lt;/dt&gt;
          &lt;dt&gt;Image Title Five&lt;/dt&gt;&lt;/dl&gt;
  
  &lt;/div&gt;
  
  &lt;div id="booktextdiv"&gt;
  
  &lt;div class="bkcontent"&gt;Lorum Ipsum....&lt;/div&gt;
  
  &lt;div class="bkcontent"&gt;Lorum Ipsum....&lt;/div&gt;
  
  &lt;div class="bkcontent"&gt;Lorum Ipsum....&lt;/div&gt;
  
  &lt;div class="bkcontent"&gt;Lorum Ipsum....&lt;/div&gt;
  
  &lt;div class="bkcontent"&gt;Lorum Ipsum....&lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>the CSS:</strong></p>
  
  <pre><code>#bookimggallery { width: 600px; height:200px; margin:2px; text-align: center;}
  
  dl.gallery {width: 93px; text-align: center; float: left;}
  
  .gallery dt { width: 80px; margin-top:2px; font-size: .7em; text-align:center;}
  
  #booktextdiv span {display:none}
  
  *(omitted tabs CSS for clairity)*
  </code></pre>