JQuery next() - Pierwsze następne rodzeństwo używając tylko klas

Question

Próbuję stworzyć coś jak akordeon sieciowy.

wizualna przykład:

[TITLE DIV 1] 
[CONTENT DIV 1] 
[TITLE DIV 2] 
[CONTENT DIV 2] 
[TITLE DIV 3] 
[CONTENT DIV 3] 

Chcę, aby móc przełączać (funkcja przełączania jQuery()) jest "Content Div" poprzez kliknięcie na odpowiedni tytuł "div".

Próbowałem następujące, ale to nie działa.

http://jsfiddle.net/Cs3YY/

HTML:

<div class="topSeparator"></div> 
<div class="titleDiv"> 
    <h1>Title 1</h1> 
</div> 
<div class="bottomSeparator"></div>     
<div class="contentDiv"><h2>Content 1</h2></div> 

<div class="topSeparator"></div> 
<div class="titleDiv"> 
    <h1>Title 2</h1> 
</div> 
<div class="bottomSeparator"></div>     
<div class="contentDiv"><h2>Content 2</h2></div> 

JQUERY:

$('.titleDiv').click(function() {  
     $(this).next('.contentDiv').toggle(); 
}); 

http://jsfiddle.net/Cs3YY/

Chciałbym opisać mój proces funkcji, takich jak:

1. Po kliknięciu na elemencie z klasy o nazwie "titleDiv" zrobić:

1.1. Wybierz ten kliknięty element;

1.1.1. Wybierz następne rodzeństwo tego klikniętego elementu za pomocą klasy o nazwie "contentDiv";

1.1.1.1. Ustaw funkcję toggle() na tym ostatnim elemencie (z klasą o nazwie "contentDiv");

Wygląda na to, że się mylę lub czegoś brakuje.

.

Załączam jquery 1.8.3 (poprawnie).

Działa to, gdy zamiast klas używasz identyfikatorów (staram się ich unikać).

Umieściłem alert wewnątrz funkcji kliknięcia i działa (problem występuje w środku).

Answer 1

Zastosowanie .nextAll() i :first dostać następny contentDiv

$(this).nextAll('.contentDiv:first').toggle(); 

Demo tutaj http://jsfiddle.net/Cs3YY/1/

Answer 2

Mimo, że to dlatego, next() wybrać bottomSeparator. Można użyć tej sztuczki

$('.titleDiv').click(function() {  

    $(this).next().next().toggle(); 
});  

http://jsfiddle.net/Cs3YY/12/