Jquery UI Accordion expand/collapse

Question

I'm using the jQuery UI accordion and attempting to get the expand and collapse all buttons to hide and show when the corresponding button is clicked.

The idea would be that once the expand all button has been clicked and the accordion panels open up then the expand all would be replaced with collapse all and visa versa.

How do I go about switching between the two so only "expand all" or "Collapse all" appear. Instead of both alongside each other?

Thanks.

<span class='accordion-expand-all accordion_switch'><a href='#'>Expand all</a></span> 

/ 

<span class='accordion-collapse-all accordion_switch'><a href='#'>Collapse all</a></span>

Answer 1

If you just want your links to show and hide then refer to Fiddle demo

You just have to register the click events on your classes and then show and hide according to where click happens.

simple as that.

Answer 2

first set collapsible to true: http://api.jqueryui.com/accordion/#option-collapsible. next check for an active panel and use that to show/hide the correct button

 var active = $( ".selector" ).accordion( "option", "active" ); 

found this here: Detecting jquery-ui accordion open / close state