I am working with jQuery Accordion menu, and found problems with parent and child navigation, and need urgent help, thanks
I expand fully of one parent menu and its child, and then click the heading in order to make it collapse. then i expand another heading, when i go back to click first heading, the child menu were not collapsing. is there a way to collapse all child heading of one parent when select another parent heading??
thanks :)
here is my code
<div id="accordion">
<h3><a>Link One - First Level</a></h3>
<div class="accordionSecond">
<h6><a href="#">Second Level</a></h6>
<div class="accordionLink">
<a href="1.html">1.html</a>
<a href="2.html">2.html</a>
<a href="3.html">3.html</a>
<a href="4.html">4.html</a>
</div>
</div>
<h3><a>Link Two - First Level</a></h3>
<div class="accordionSecond">
<h6><a href="#">Second Level</a></h6>
<div class="accordionLink">
<a href="1.html">1.html</a>
<a href="2.html">2.html</a>
<a href="3.html">3.html</a>
<a href="4.html">4.html</a>
</div>
</div>
</div>
here is little script line
<script>
$(document).ready(function() {
$("#accordion").accordion( {active: true, collapsible: true, header: "h3", autoHeight: false, navigation: true, event: 'mouseup'});
$(".accordionSecond").accordion( {active: true, collapsible: true, header: "h6", autoHeight: false, navigation: true,event: 'mouseup'});
});
</script>
You want to tap into the changestart
event of the parent accordion. Here, you can collapse any child accordions:
$("#accordion").accordion({
active: true,
collapsible: true,
header: "h3",
autoHeight: false,
navigation: true,
event: 'mouseup',
changestart: function (event, ui) {
ui.oldContent.accordion("activate", false);
}
});
Using the activate
method and passing it false
tells accordion to collapse all sections.
Example: http://jsfiddle.net/p2h8V/