I have created an accordion using jQuery which collapses fine when the user clicks a 2nd option but I would also like to have the option to collapse the open pane by clicking again on the header. How can I do this?
Here is my existing jQuery for the creation of the accordion:
$("#accordion").tabs("#accordion div.pane", {tabs: 'h2', effect: 'slide', initialIndex: null, });
Here is the HTML:
<div id="accordion">
<h2>Heading 1</h2>
<div class="pane">... pane content ...</div>
<h2>Heading 2</h2>
<div class="pane">... pane content ...</div>
<h2>Heading 2</h2>
<div class="pane">... pane content ...</div>
</div>
//Initialize a accordion with the collapsible option specified.
$( ".selector" ).accordion({ collapsible: true });
//Get or set the collapsible option, after init.
//getter
var collapsible = $( ".selector" ).accordion( "option", "collapsible" );
//setter
$( ".selector" ).accordion( "option", "collapsible", true );
Source: http://jqueryui.com/demos/accordion/#option-collapsible
find this demo: http://jsfiddle.net/2DaR6/
Did you mean the effect as in this demo?
Click the selected tab to toggle its content closed/open. To enable this functionality, set the collapsible option
to true
.
collapsible: true
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With