jQuery UI Accordion Options Event

This event can make accordion headers to react differently when you click on headers or move the mouse over the headers.
ExampleJquery ui accordion options event
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",
		event: "click"
	});

	$("input").each(function () {
		$(this).change(function () {
			if ($(this).attr("id") == "1") {
				$("#accordion").accordion("option", "event", "click");
			} else {
				$("#accordion").accordion("option", "event", "mouseover");
			}

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

<!-- HTML -->
<div style="height:250px">
    <div id="accordion">
        <h3>Tab 1 (I`m collapsible)</h3>
        <div>Tab 1 content</div>
        
        <h3>Tab 2 (I`m collapsible)</h3>	
        <div>Tab 2 content</div>
        
        <h3>Tab 3 (I`m collapsible)</h3>
        <div>Tab 3 content</div>
    </div>
</div>
<div style="margin-top:50px">
    <input type="radio" name="options" id="1" checked>Mouse Click Event
    <input type="radio" name="options" id="2">Mouse Over Event
</div>


comments powered by Disqus