我想做一个类似网络 accordion 的东西
可视化示例：

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

我希望能够切换（jquery函数切换（））通过点击相应的“标题Div”的“内容Div”。
我尝试了以下方法，但不起作用。
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.使函数toggle（）作用于最后一个元素（类名为“contentDiv”）;
似乎我错了，或者我错过了什么。
.

• 我包含了jquery 1.8.3（正确）。*
• 这在使用ID而不是类时有效（我试图避免使用它们）。
• 我在click函数中放置了一个alert，它可以正常工作（问题就在它里面）。*