CODEWITHSUNDEEP
javascriptjquerycss
alex494
alex494

Reputation: 141

How to close a child accordion if the parent is closed?

I have the following code for a working parent/child accordion div setup.

    <div class="accordion">
        <h3>Part 1</h3>
        <div class="accordion">
            <h3>Sub-Div1</h3>
            <div>
                <p>This is a sub-div</p>
            </div>
        </div>

        <h3>Part 2</h3>
        <div>
            <p>This is part 2</p>
        </div>
    </div>

And the Script

<script>
        $(".accordion").accordion({
            header: "> h3",
            heightStyle: "content",
            active: false,
            collapsible: true
        });
    </script>

My question is, how to I get a child accordion to close when a parent is closed?

e.g. When the first option of the accordion is open, and its child is open, clicking the second option closes the first. But when the first is opened again, the child is still open from before.

Thanks in advance.

Upvotes: 1

Views: 918

Answers (1)

empiric
empiric

Reputation: 7878

You can use the activate-function of the accordion-widget:

 $(".accordion").accordion({
     header: "> h3",
     heightStyle: "content",
     active: false,
     collapsible: true,
     activate: function( event, ui ) {      
         if(ui.oldPanel.hasClass('accordion')){                   
             ui.oldPanel.accordion( "option", "active", false );
         }
     }
});

DEMO

Reference:

active-option

activate-function

Upvotes: 1

Related Questions