CODEWITHSUNDEEP
jqueryjquery-uijquery-ui-accordion
will.i.am
will.i.am

Reputation: 2002

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>

Upvotes: 1

Views: 6232

Answers (1)

Andrew Whitaker
Andrew Whitaker

Reputation: 126042

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/

Upvotes: 2

Related Questions