Jquery UI Accordion expand/collapse

0
votes

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>
2
javascriptjqueryjquery-uiaccordion
and your problem is ..... ? to expand and collapse accordion ? or buttons showing and hiding ? - Saurabh
How do I go about switching between the two so only "expand all" or "Collapse all" appear. Instead of both alongside each other - user2879183
You should be using <button>s instead of <a>s. - Rahul Desai

2 Answers

1
votes

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.

0
votes

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