JQuery next() - 클래스 만 사용하여 다음 형제 가져 오기

Question

웹 아코디언과 같은 것을 만들려고합니다.

시각 예 :

내가 전환 할 수 있도록하려는

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

(JQuery와 기능 토글()) 각각의 "제목 사업부"를 클릭하여 "콘텐츠 사업부".

다음을 시도했지만 작동하지 않습니다.

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/

:

,369

1. 는 "titleDiv"라는 이름의 클래스를 가진 요소를 클릭 1,363,210은 수행

1.1. 클릭 된 요소를 선택하십시오.

1.1. "contentDiv"라는 클래스로 클릭 된 요소의 다음 형제를 선택하십시오.

1.1.1. 이 마지막 요소 ("contentDiv"라는 클래스로)에 대해 toggle() 함수를 실행합니다.

내가 틀렸거나 뭔가를 놓친 것 같습니다.

.

저는 jquery 1.8.3 (올바르게)을 포함하고 있습니다.

이것은 클래스 대신 ID를 사용할 때 작동합니다 (사용하지 않으려 고합니다).

클릭 기능 내부에 경고가 표시되고 작동합니다 (문제가 내부에 있음).

Answer 1

사용 .nextAll() 및 :first 다음()는 bottomSeparator를 선택 그것 때문에 여기 http://jsfiddle.net/Cs3YY/1/

Answer 2

하지만 다음 contentDiv이

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

데모 얻을 수 있습니다. 당신은 그 트릭

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

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

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