jQuery toggle динамически

Question

Я хочу динамически переключаться divs. Вот что я нашел до сих пор ...

$(".toggle").click(function() { 
$(this).next('.container').toggle('fast'); 
}); 

Что у меня есть это (HTML):

<h4 class="toggle">1</h4> 
<h4 class="toggle">2</h4> 
<h4 class="toggle">3</h4> 
<div class="container">Content1</div> 
<div class="container">Content2</div> 
<div class="container">Content3</div> 

Когда я нажимаю на первый элемент (H4 с классом тумблер) Я хочу, чтобы первый элемент с контейнером класса для открытия/закрытия.

Когда я нажимаю второй класс переключения, должен открыться второй контейнерный класс.

Следующий в моем примере не работает.

Answer 1

Если вам нужно/хотите сохранить эту структуру DOM, вы должны использовать index.

$('.toggle').click(function() { 
    $('.container').eq($(this).index()).toggle('fast'); 
}); 

Ref .: .eq(), .index()

Пример: http://www.jsfiddle.net/4yUqL/36/

Answer 2

Вы можете попробовать toggle feature of JQuery. И я предпочел бы иметь некоторую иную зависимость между заголовками и разделами контента, а не доверять порядку их появления.

Answer 3

Я думаю, что вы ищете

$(".toggle").click(function() { 
    $($('.container')[$(this).index(".toggle")]).toggle('fast'); 
}); 

Рабочая fiddle

Answer 4

если изменить порядок отображения HTML:

<h4 class="toggle">1</h4> 
<div class="container">Content1</div> 
<h4 class="toggle">2</h4> 
<div class="container">Content2</div> 
<h4 class="toggle">3</h4> 
<div class="container">Content3</div> 

ваш код работает, потому что это только получение следующий элемент DOM и переключая его, если он соответствует классу. Однако это довольно шаткий и другие примеры людей, которые говорят js более конкретно, что делать было бы лучше.