Bootstrap nested accordion with inner div not being a panel

Question

I've been trying to implement a nested accordion using bootstrap. So far, I'm able to have nested panels that act as accordions, as seen in this jsfiddle and duplicated below. (Sorry for the code bloat.)

<div class="panel-group" id="accordion1">

    <div class="panel panel-default">
        <div class="panel-heading">
             <h4 class="panel-title">
                 <a data-toggle="collapse" data-parent="#accordion1" href="#collapseOne">
                 Collapsible Group Item #1
                 </a>
             </h4>
        </div>
        <div id="collapseOne" class="panel-collapse collapse in">
            <div class="panel-body">Panel 1</div>
        </div>
    </div>

    <!-- I'd like the content of this group to behave as the panels do. -->
    <div class="panel panel-default">
        <div class="panel-heading">
             <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion1" href="#collapseTwo">
                    Collapsible Group Item #2
                </a>
            </h4>
        </div>
        <div id="collapseTwo" class="panel-collapse collapse">
            <div class="panel-body">

                <div class="collapse-group" id="#accordion2">
                    <h2>Heading</h2>
                    <p><a data-toggle="collapse" data-parent="#accordion2" data-target="#collapseTwoOne">View details 2.1 &raquo;</a></p>
                    <p class="collapse" id="collapseTwoOne">Details 1</p>
                    <p><a data-toggle="collapse" data-parent="#accordion2" data-target="#collapseTwoTwo">View details 2.2 &raquo;</a></p>
                    <p class="collapse" id="collapseTwoTwo">Details 2</p>              
                </div>

            </div>

        </div>
    </div>

    <!-- This group shows how panels may be nested. But what about a plain div inside a panel? -->
    <div class="panel panel-default">
        <div class="panel-heading">
             <h4 class="panel-title">
                 <a data-toggle="collapse" data-parent="#accordion3" href="#collapseThree">
                 Collapsible Group Item #3
                 </a>
             </h4>
        </div>
        <div id="collapseThree" class="panel-collapse collapse in">
            <div class="panel-body">

                <div class="panel-group" id="accordion2">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                             <h4 class="panel-title">
                                <a data-toggle="collapse" data-parent="#accordion2" href="#collapseThreeOne">
                                    Collapsible Group Item #3.1
                                </a>
                              </h4>
                        </div>
                        <div id="collapseThreeOne" class="panel-collapse collapse in">
                            <div class="panel-body">Panel 3.1</div>
                        </div>
                    </div>
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h4 class="panel-title">
                                <a data-toggle="collapse" data-parent="#accordion2" href="#collapseThreeTwo">            
                                    Collapsible Group Item #3.2
                                </a>
                            </h4>
                        </div>
                        <div id="collapseThreeTwo" class="panel-collapse collapse">
                            <div class="panel-body">Panel 3.2</div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>

</div>

However, what I'd like to achieve is having the items in "Collapsible Group Item #2" from the code above to also display in a mutually exclusive way, i.e. if one div is being displayed, then the other will be hidden (if it's not already so).

What do I have to do to get the desired effect?

Answer 1

Try this:

DEMO

 <div class="panel-group" id="accordion1">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h4 class="panel-title">
                        <a data-toggle="collapse" data-parent="#accordion1" href="#collapseOne">Collapsible Group Item #1
                        </a>
                    </h4>
                </div>
                <div id="collapseOne" class="panel-collapse collapse in">
                    <div class="panel-body">Panel 1</div>
                </div>
            </div>

            <div class="panel panel-default">
                <div class="panel-heading">
                    <h4 class="panel-title">
                        <a data-toggle="collapse" data-parent="#accordion1" href="#collapseTwo">Collapsible Group Item #2
                        </a>
                    </h4>
                </div>
                <div id="collapseTwo" class="panel-collapse collapse">
                    <div class="panel-body">
                        <div class="panel-body">
                            <h2>Heading</h2>
                            <div class="panel-group" id="accordion21">
                                <div class="panel">
                                    <a data-toggle="collapse" data-parent="#accordion21" href="#collapseTwoOne">View details 2.1 &raquo;
                                    </a>
                                    <div id="collapseTwoOne" class="panel-collapse collapse">
                                        <div class="panel-body">Details 1</div>
                                    </div>
                                </div>
                                <div class="panel ">
                                    <a data-toggle="collapse" data-parent="#accordion21" href="#collapseTwoTwo">View details 2.2 &raquo;
                                    </a>
                                    <div id="collapseTwoTwo" class="panel-collapse collapse">
                                        <div class="panel-body">Details 2</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="panel panel-default">
                <div class="panel-heading">
                    <h4 class="panel-title">
                        <a data-toggle="collapse" data-parent="#accordion1" href="#collapseThree">Collapsible Group Item #3
                        </a>
                    </h4>
                </div>
                <div id="collapseThree" class="panel-collapse collapse">
                    <div class="panel-body">

                        <div class="panel-group" id="accordion2">
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <h4 class="panel-title">
                                        <a data-toggle="collapse" data-parent="#accordion2" href="#collapseThreeOne">Collapsible Group Item #3.1
                                        </a>
                                    </h4>
                                </div>
                                <div id="collapseThreeOne" class="panel-collapse collapse in">
                                    <div class="panel-body">Panel 3.1</div>
                                </div>
                            </div>
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <h4 class="panel-title">
                                        <a data-toggle="collapse" data-parent="#accordion2" href="#collapseThreeTwo">Collapsible Group Item #3.2
                                        </a>
                                    </h4>
                                </div>
                                <div id="collapseThreeTwo" class="panel-collapse collapse">
                                    <div class="panel-body">Panel 3.2</div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>

        </div>