Bug with Toggle in jQuery

Question

I'm trying to create a spoiler on a forum (vbulletin) It's basicaly a toggle div on click. It's all working fine, but when placing a toggle div inside another toggle div the animation just goes up and down without stopping. (it opens and closes)

The weird thing about it is, when i test it on jsfiddle, it's working fine.

On vbulletin the jquery code gets replaced with BBcode like this

[spoiler] Text/Images [/spoiler]

HTML

<div class="head">
    Click to show content
</div>
<div class="body" style="display:none;">   
    Content
    <div class="head">
        Click to show content
    </div>
    <div class="body" style="display:none;">   
        Content
    </div>
</div>

Jquery

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

Can anyone think of a solution for this? Any help is highly appreciated

Heres the jsfiddle with toggle div within another toggle div http://jsfiddle.net/9FP55/

Answer 1

With your nested .head's with .body you would need a more complicated selector:

$("div[id^=post_message] > .head, .body > .head").on("click", function(){
  $(this).next().slideToggle("slow");
});

Of course the better solution is not to create this ambiguity to begin with.

Demo: http://jsbin.com/olizux/4/edit

Perhaps this is just a typo, but your code doesn't contain the required $:

(document).ready(function(){
  /* Code here */
});

Should be

$(document).ready(function(){
  /* Code Here */
});

Or simply

$(function(){
  /* Code Here */
});