Question

I’m trying to create some sort of "spoiler" for a forum. It’s pretty simple, though i’m fairly new to jquery. But now i got this problem when placing a toggle div element inside another toggle div element, the 2nd toggle doesn’t work. Can anyone point me in the right direction?

Jquery

$(document).ready(function(){
    $('.head').click(function() {
  $('.body').toggle('slow')
  });
});

HTML

<div class="head">
Show Content
</div>
<!--1st toggle div-->
 <div class="body" style="display:none;">
  Content
    <div class="head">
     Show Content
    </div>
     <!--2nd toggle div-->
     <div class="body" style="display:none;">
     Content
     </div>
 </div>

JSFiddle here.

Thanks to everyone that’s trying to help 🙂

EDIT:

Right after i posted i’ve seen that i was using multiple ID’s in the HTML code.
I’ve changed the div id’s to classes, but now when i click to show content1, content2
also shows up. Can someone help me with it?

Answer 1

Yeah try this https://jsfiddle.net/ufC5B/2/

$(document).ready(function(){
    $('.head').click(function() {
        $(this).siblings('.body:first').toggle('slow')
  });
});