jQuery UI手风琴 - 全部展开

时间:2014-01-29 09:08:27

标签: jquery-ui accordion collapse expand

我正在使用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>

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

您对如何实现这一目标有什么建议吗?

1 个答案:

答案 0 :(得分:0)

/ ** HTML代码** /

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

/ ** Jquery Code ** /

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


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