Databases
StackOverflow2013
Postsdbo
POHow to fix this jQuery SlideToggle?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to fix this jQuery SlideToggle?
    text
    copied!<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>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload