jQuery UI 手风琴 - 展开全部

Question

我正在使用来自 Jquery 网站的以下示例代码： http://jqueryui.com/accordion/#collapsible

<script>
$(function() {
$( "#accordion" ).accordion({
collapsible: true
});
});
</script>
<div id="accordion">
  <h3>Section 1</h3>
  <div> content 1 </div>
  <h3>Section 2</h3>
  <div> content 2 </div>
  <h3>Section 3</h3>
  <div> content 3 </div>
</div>

但现在我需要添加两个按钮：一个用于“全部折叠”，另一个用于“全部展开”。

您对如何实现这一点有什么建议吗？

Answer 1

/** HTML 代码**/

<a id="collapseAll">Collapse All</a>
<a id="expandAll">Expand All</a>

/** jQuery 代码 **/

$("#collapseAll").click(function(){
    $(".ui-accordion-content").hide()
});


$("#expandAll").click(function(){
    $(".ui-accordion-content").show()
});