JQuery अगला() - केवल कक्षाओं का उपयोग करके अगले भाई को प्राप्त करना

Question

मैं वेब accordion की तरह कुछ बनाने की कोशिश कर रहा हूं।

दृश्य उदाहरण:

[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/

मैं जैसे मेरी समारोह प्रक्रिया का वर्णन होगा:

1. आप "titleDiv" नामक एक वर्ग के साथ एक तत्व पर क्लिक करते हैं, कार्य करें:

1,1। उस क्लिक किए गए तत्व का चयन करें;

1.1.1। "ContentDiv" नामक कक्षा के साथ उस क्लिक किए गए तत्व के अगले भाई का चयन करें;

1.1.1.1। इस अंतिम तत्व पर फ़ंक्शन टॉगल() कार्य करें ("contentDiv" नाम की कक्षा के साथ);

ऐसा लगता है कि मैं गलत हूं या मुझे कुछ याद आ रही है।

।

मैं jquery 1.8.3 (सही ढंग से) सहित हूं।

यह कक्षाओं के बजाय आईडी का उपयोग करते समय काम करता है (मैं उनका उपयोग करने से बचने की कोशिश कर रहा हूं)।

मैंने क्लिक फ़ंक्शन के अंदर एक अलर्ट रखा और यह काम करता है (समस्या इसके अंदर है)।

Answer 1

उपयोग .nextAll() और :first अगले contentDiv

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

डेमो यहाँ http://jsfiddle.net/Cs3YY/1/

Answer 2

हालांकि पाने के लिए, क्योंकि यह अगले() bottomSeparator का चयन करें। आपको लगता है कि चाल

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

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

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