jQuery UI accordion - expand all

Question

I'm using below example code from Jquery website: 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>

But now I need to add two buttons: one to "Collapse All" and another one to "Expand All".

Do you have any suggestions on how to achieve this?

Answer 1

/** HTML Code**/

<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()
});