jQuery, Toggle in toggle

Question

Я пытаюсь создать своего рода «спойлер» для форума. Это довольно просто, хотя я довольно новичок в jquery. Но теперь у меня возникла проблема при размещении элемента div div в другом элементе div div, 2-й переключатель не работает. Может кто-то указать мне верное направление?

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.

Спасибо всем, что пытается помочь :)

EDIT:

Сразу после опубликования я видел, что я использовал несколько ID в HTML-коде. Я изменил id div на классы, но теперь, когда я нажимаю, чтобы показать контент1, также появляется content2 . Может кто-нибудь мне помочь?

Answer 1

Да попробовать этот http://jsfiddle.net/ufC5B/2/

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

Answer 2

Вам нужно, чтобы отделить его от классов, а затем использовать некоторые полезные методы JQuery Traversal, чтобы сделать его чище.

Мы будем использовать селектор .next, вот живой jsFiddle.

Working jsFiddle

Вот код, который я использовал, чтобы сделать его работу; смените голову и тело на классы вместо ID.

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

Answer 3

Обе дивы показывают, потому что $('.body') будет соответствовать всем элементам в DOM, которые имеют класс body и выполняют функцию на всех из них.

Чтобы избежать этого, используйте специально названные div или добавьте еще один идентификатор к элементам, например, пример ниже.

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

$(document).ready(function(){ 
    $('.head').click(function() { 
     var depth = $(this).attr('data-depth'); 
     $('.body[data-depth=' + depth + ']').toggle('slow'); 
    }); 
});​