javascript - jQuery 简单可折叠 Div？

Question

我正在寻找合适的、简单的、小的代码来做以下事情:

• 单击应用了类的元素。

• DIV.CLASS - 展开并显示隐藏内容。 (slideDown - 切换)

• DIV.CLASS - 折叠并隐藏之前显示的内容。 (slideUp - 切换)

<div class="sitesection">
    <p class="expand-one"><a href="#">Click Here To Display The Content</a> <img src="images/arrow.png" width="5" height="7" /></p>
    <p class="content-one">This is the content that was hidden before, but now is... Well, visible!"</p>
</div>

所以为了含糊和简单，我需要知道一旦同一页面上的元素应用了 CLASS，如何让 DIV CLASS 变得隐藏和可见，这将激活和停用 HIDDEN 和/或 VISIBLE HTML 内容。我需要它默认隐藏。

我在网上找遍了，只找到了非常复杂的脚本，但没有找到简单的。我找到了 Simple Accordians...但是那些永远不会关闭，它们只是打开另一个。

Answer 1

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

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