jQuery 简单可折叠 Div？

我正在寻找合适的、简单的、小的代码来执行以下操作：

• 单击应用了类的元素。

• DIV.CLASS - 扩展并显示隐藏内容。 （向下滑动-切换）

• DIV.CLASS - 折叠并隐藏之前显示的内容。 （向上滑动-切换）

<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 变得隐藏和可见，这将激活和停用隐藏和/或可见 HTML 内容。我需要它默认隐藏。

我查遍了互联网，只找到了非常复杂的脚本，但没有什么简单的。我找到了简单的手风琴......但那些永远不会关闭，它们只是打开另一个。

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

Demo: http://jsfiddle.net/Q4PUw/2/ http://jsfiddle.net/Q4PUw/2/