jqueryjquery-uijquery-ui-accordion

jQuery Accordion Collapse and Expand Issue (Parent & Child)


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>

Solution

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