jQuery Simple Collapsible Div？

Question

我正在寻找适当的,简单的小代码来执行以下操作:

• 单击Element with Class应用于它.

• DIV.CLASS - 扩展并显示隐藏的内容.(slideDown - Toggle)

• DIV.CLASS - 崩溃并隐藏之前显示的内容.(slideUp - Toggle)

我在这里创建了一个jsFiddle:http://jsfiddle.net/Q4PUw/1/

因此,为了模糊和简单,我需要知道如果同一页面上的元素应用了CLASS,如何使DIV CLASS变得隐藏和可见,其中将激活和停用HIDDEN和/或VISIBLE HTML内容.我需要它默认隐藏.

我看过整个互联网,只发现了非常复杂的脚本,但并不简单.我找到了简单的手风琴......但是那些从未关闭的人,他们只是打开另一个.

谢谢大家的帮助,我希望我能够为很多其他人回答同样的问题......

注意:我知道很少的JavaScript甚至是jQuery.

Answer 1

$('.expand-one').click(function(){
    $('.content-one').slideToggle('slow');
});

演示:http://jsfiddle.net/Q4PUw/2/

Answer 2

我正在看这个,想要一个已经为我设计的可折叠div.然后我意识到我想要的是单窗格jquery-ui手风琴.

<div id="collapse">
   <h3>Collapse and Expand</h3>
   <div>Content</div>
</div>
<script>
$( "#collapse" ).accordion({
    collapsible: true,
    active: false
});
</script>

http://jsfiddle.net/MB4ch/1/