Databases
StackOverflow2013
Postsdbo
PO.slidetoggle separate divs in jquery
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO.slidetoggle separate divs in jquery
    text
    copied!<p>I have looked up virtually every other question to this and none of the fixes have worked for me. I am trying to have a profile pic that will toggle the bio below it. Before I add the (this).next to my slideToggle event, it slides but it slides all instances of the class .bio. Adding the (this).next breaks the code. I have the latest jquery.js saved as jquery-1.8.2.js in my folder. Could it be a css issue? Any insight would be SOO helpful. Thank you. </p> <pre><code>&lt;script&gt; $(document).ready(function() { $('.bio').hide(); $('.toggle').click(function() { $(this).next('.bio').slideToggle(); }); }); &lt;/script&gt; &lt;div class="profile"&gt; &lt;div class="profilepic"&gt; &lt;a class='toggle' href="#"&gt;&lt;img src="images/charles.jpg" width="100" height="100" alt="charles"/&gt;&lt;/a&gt; &lt;/div&gt;&lt;!-- end of profilepic class --&gt; &lt;div class="officerinfo"&gt; &lt;h4 class='toggle'&gt;Dude McDudeson&lt;/h4&gt; &lt;br&gt; &lt;a href="mailto:duuuude@gmail.com"&gt;duuuude@gmail.com&lt;/a&gt; &lt;h5&gt;&lt;a href="positions.html"&gt;President&lt;/a&gt; &lt;br&gt; &lt;br&gt; &lt;/div&gt;&lt;!-- end of officerinfo class --&gt; &lt;div class="bio" style="display:none"&gt; &lt;p&gt;description&lt;/p&gt; &lt;/div&gt;&lt;!-- end of bio class --&gt; &lt;/div&gt;&lt;!-- end of profile class --&gt; </code></pre> <p>css</p> <pre><code>/* Profile */ .profile { position: relative; padding-top:20px; width: 550px; height: 150px; } /* ProfilePic */ .profilepic { float: left; width: 100px; height: 100px; } /* Officer Info */ .officerinfo { width:420px; float: right; } /* Bio */ .bio { width: 420px; float: right; } </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