CODEWITHSUNDEEP
twitter-bootstrap
Haris Hajdarevic
Haris Hajdarevic

Reputation: 1575

Closing parent accordion needs to close all children accordion

I'm using bootstrap accordion and I make it to work with a nested accordion.

What I'm trying to achieve now is closing all children accordion containers.

So, if we close parent it needs to close all children accordion including content of body accordion.

In this jsFiddle example if do following:

  1. Click "Heilbehandlung für Mensch und Tier"
  2. Open "Schamanische Arbeiten für Menschen"
  3. Click again on "Heilbehandlung für Mensch und Tier"
  4. And open once again "Heilbehandlung für Mensch und Tier"

You will see that "Schamanische Arbeiten für Menschen" is opened because we opened it in a step #2. I want that it be also closed on step #3.

I hope that you understand what I want to achieve.

Here is source code provided:

<div class="panel-group uk-row-first" id="accordion-neuweltenbreucken">
    <div class="uk-width-medium-1-1">

        <article class="uk-article" id="accordion" data-permalink="http://neu.weltenbruecken.com/16-accordeon/36-heilbehandlung-fur-mensch-und-tier">
            <div>

                <div class="panel panel-default">
                    <div class="panel-heading main">
                        <h4 class="panel-title"><a href="#collapse2" class="panel-toggle collapsed" data-parent="#accordion-neuweltenbreucken"  data-body-background="background2.jpg" data-toggle="collapse"> Heilbehandlung für Mensch und Tier </a></h4>
                    </div>
                    <div id="collapse2" class="panel-body collapse">
                        <div class="panel-inner main">
                            <!-- Here we insert another nested accordion -->
                            <div id="accordion4" class="panel-group">
                                <div class="panel panel-default">
                                    <div class="panel-heading">
                                        <h4 class="panel-title"><a href="#collapse2Inner1" class="panel-toggle" data-toggle="collapse" data-parent="#accordion4"> Schamanische Arbeiten für Menschen </a></h4>
                                    </div>
                                    <div id="collapse2Inner1" class="panel-body collapse">
                                        <p>Vorbereitungsarbeiten Fr. 75 / h , Heilarbeiten Fr. 135 / h, Nacharbeit, Dokumentation Fr. 75 / h</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="panel panel-default">
                                    <div class="panel-heading">
                                        <h4 class="panel-title"><a href="#collapse2Inner2" class="panel-toggle" data-toggle="collapse" data-parent="#accordion4"> Schamanische und telepathische Arbeit für Tiere </a></h4>
                                    </div>
                                    <div id="collapse2Inner2" class="panel-body collapse">
                                        <div class="panel-inner">
                                            <h5>Telepathische Kommunikation</h5>
                                    </div>
                                    </div>
                                </div>
                            </div>
                            <!-- Inner accordion ends here -->
                        </div>
                    </div>
                </div>


        </article>
    </div>

Upvotes: 0

Views: 1120

Answers (2)

Haris Hajdarevic
Haris Hajdarevic

Reputation: 1575

Thanks Nidhi.

I will accept your answer, because you give me idea how to achieve this.

I made it without changing DOM structure ( changing html ).

This solution will work for any number of childrens of accordion. 

  closeChildrenAccordion : function (accordion) {
            if (jQuery(".accordion-open")) {
                jQuery(".accordion-open").unbind().click(function () {
                    jQuery(accordion).removeClass('accordion-open');
                    var parentPanelHeading = jQuery(this).closest('.panel-heading'); // Get parent
                    var siblings           = parentPanelHeading.siblings()[0]; // Get div that needs to be closed when closing parent div

                    if(jQuery(siblings).hasClass("in"))
                    {
                        jQuery(siblings).find('a').each(function (index, element) {
                            if(jQuery(element).hasClass('active'))
                                element.click();
                        });
                    }


                });


            }
        }

Upvotes: 0

Nidhi
Nidhi

Reputation: 888

You can check the code here https://jsfiddle.net/nidhi_sh/ot4m9q2u/1/

$(document).ready(function(){
    $("#acc2").click(function(){
    var n=2; //total number of inner div in accordion
    for(i=1;i<=n;i++)
    {
       if($("#collapse2Inner"+i).hasClass("in"))
       {
            $("#acc2inner"+i).click(); //Click on link of each accordion to close it
       }
    }    
    });
});

The if condition is to detect that the inner div in the accordion is active. One way is by checking the current class assigned to the inner div. It is marked as in when the div is open and collapse when the div is close. Once you know that the div is open, just click on its corresponding href element to close it.

The for loop is to make sure that all the div elements in the inner accordion are collapsed when you click on the parent accordion's href element.

For this to work, I have assigned ids to the href elements in your code.

Upvotes: 1

Related Questions