jQuery UI Accordion Options Collapsible

When collapsible set to true, and you click on an accordion header, this allows collapsing the active section.
ExampleJquery ui accordion options collapsible
Source Code Expand
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script type="text/javascript" src="http://www.pureexample.com/js/lib/jquery.ui.touch-punch.min.js"></script>


<!-- CSS -->
<style type="text/css">
#accordion {
    font-size: 50%;
}
</style>


<!-- Javascript -->
<script>
$(function () {
	$("#accordion").accordion({
		heightStyle: "fill",
		collapsible: true
	});
	
	$("input").each(function () {
		$(this).change(function () {
			if ($(this).attr("id") == "disableCollapsible    ") {
				$("#accordion").accordion("option", "collapsible", true);
			} else {
				$("#accordion").accordion("option", "collapsible", false);
			}

		});
	});
});
</script>

<!-- HTML -->
<div style="height:250px">
    <div id="accordion">
        <h3>Tab 1</h3>
        <div>Tab 1 content</div>
        
        <h3>Tab 2</h3>	
        <div>Tab 2 content</div>
        
        <h3>Tab 3</h3>
        <div>Tab 3 content</div>
    </div>
</div>
<div style="margin-top:30px">
    <input type="radio" name="collapsible" id="disableCollapsible"  value="disable">Disable collapsible
    <input type="radio" name="collapsible" id="enableCollapsible" checked value="enable">Enable collapsible
</div>


comments powered by Disqus