javascript - 项目列表，内容在单击时展开，如果项目已展开则折叠

Question

基本上，我有一个项目列表，其内容会在单击时展开。一次只能展开一个项目的内容 - 即，如果我单击一个项目，它的内容将展开，而另一项目的内容将折叠。

我正在寻找的是，如果单击一个项目并且其内容已经展开，我希望它折叠起来。正如我现在的代码所示，如​​果内容已经展开并且单击了该项目，则内容只会重新展开。

非常感谢您的帮助!

JS

$('.image-container').click(function() {
     $('.text-container').hide(200);
     $(this).next('.text-container').show(400);
});   

HTML

<div id="class1" class="image-container">
    <a href="#">An Image</a>
</div>
<div id="class1-container" class="text-container">
    <p>Some Content</p>
</div>

 <div id="class2" class="image-container">
    <a href="#">An Image</a>
 </div>
 <div id="class2-container" class="text-container">
     <p>Some Content</p>
 </div>

Answer 1

参见http://jsfiddle.net/esgk2hve/

$('.image-container').click(function() {
     $('.text-container').not($(this).next()).hide(200);
     $(this).next('.text-container').toggle(400);
});