bootstrap - Collapse jQuery Accordion On Click





header event (3)


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

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 should I do this?

Here's a fiddle showing how I've set it up so far: http://jsfiddle.net/gstubbenhagen/JyFRC/

EDIT: Replaced code examples w/ jsFiddle link




//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/




You can use:

  if(document.getElementById('isAgeSelected').checked)
    $("#txtAge").show();  
  else
    $("#txtAge").hide();

if($("#isAgeSelected").is(':checked'))
  $("#txtAge").show();  
else
  $("#txtAge").hide();

Both of them should work.