jQuery 简单可折叠 Div？

Question

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

• 单击应用了类的元素。

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

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

我在整个互联网上都看过，只发现了非常复杂的脚本，但没有什么简单的。我找到了 Simple Accordians…但是那些永远不会关闭，它们只是打开另一个。

原文由 Aaron Brewer 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

原文由 AlienWebguy 发布，翻译遵循 CC BY-SA 3.0 许可协议

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/

原文由 Biff MaGriff 发布，翻译遵循 CC BY-SA 3.0 许可协议