Nested Bootstrap Collapse (Accordion)

Question

I'm implementing Bootstrap 3.3.7 Collapse (accordion). I did copy the example here.

I modified the panel-title part by adding caret and moving the text out of anchor so that only caret would clickable that would respond to the collapse event:

<h4 class="panel-title">
    <a class="collapsed" role="button" data-toggle="collapse" data-parent="#sub-role-1_sub-role-1-accordion" href="#collapse-sub-role-1_sub-role-1" aria-expanded="true" aria-controls="collapse-sub-role-1_sub-role-1">
        <span class="caret caret-mr"></span>
    </a>Sub Role 1
</h4>

I also added custom JS and CSS to make caret go up (dropup) when clicked to collapse:

var collapseList = $('.panel .panel-collapse');
collapseList.each(function() {
    var collapseId = $(this).attr('id');
    $('#' + collapseId).on('show.bs.collapse', function() {
        $(this).prev('.panel-heading').find('.panel-title > a').addClass('dropup');
    }).on('hide.bs.collapse', function() {
        $(this).prev('.panel-heading').find('.panel-title > a').removeClass('dropup');
    });
});

.panel .panel-heading>.panel-title>a>span.caret {
    border-top: 6px solid black;
}

.panel .panel-heading>.panel-title>a.dropup>span.caret {
    border-bottom: 6px solid black;
    border-top: none;
}

I've changed all the IDs and all others data-attributes to avoid conflicts.

This perfectly works except for nested accordion (accordion inside an accordion body). Currently, I have three levels of nested accordion. The problem is that the nested accordion affects also the parent up to the root accordion - their carets also go dropup or dropdown. The second accordion (nested) affects the first, the third affects the second and first.

Complete codes: GitHub Gist

Thanks for help.

Answer 1

Update 2021

The original answers are out-of-date. With the latest Bootstrap 5, accordion behavior can be acheived by simply using the data-bs-parent= attribute on the sibling Collapse elements...

Nested accordions can be placed inside another Collapse element which then becomes the data-bs-parent= of the nested children.

<div id="accordion">
        <div class="card">
            <div class="card-header" id="headingOne">
                <h5 class="mb-0 d-inline">
                    <button class="btn btn-link" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> Collapse #1 </button>
                </h5>
            </div>
            <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-bs-parent="#accordion">
                <div class="card-body" id="child1">
                    <div class="card">
                        <div class="card-header">
                            <a href="#" data-bs-toggle="collapse" data-bs-target="#collapseOneA">Child A</a>
                        </div>
                        <div class="card-body collapse" data-bs-parent="#child1" id="collapseOneA"> ... </div>
                    </div>
                    <div class="card">
                        <div class="card-header">
                            <a href="#" data-bs-toggle="collapse" data-bs-target="#collapseOneB">Child B</a>
                        </div>
                        <div class="card-body collapse" data-bs-parent="#child1" id="collapseOneB"> ... </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="card">
            <div class="card-header" id="headingTwo">
                <h5 class="mb-0">
                    <button class="btn btn-link collapsed" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> Collapse #2 </button>
                </h5>
            </div>
            <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-bs-parent="#accordion">
                <div class="card-body"> ... </div>
            </div>
        </div>
        <div class="card">
            <div class="card-header" id="headingThree">
                <h5 class="mb-0">
                    <button class="btn btn-link collapsed" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> Collapse #3 </button>
                </h5>
            </div>
            <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-bs-parent="#accordion">
                <div class="card-body"> ... </div>
            </div>
        </div>
    </div>

Bootstrap 5 Nested Accordion

Answer 2

span[aria-expanded="true"] i::before {
        content: "\f106";
    }

    .uner {
        margin: 0 50px 15px;
    }
    #collapse1 {
        border:1px solid #dedede;
        border-top:0px;
    }

<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>



<body>

    <div class="container">
        <h2>Accordion Example</h2>
        <p><strong>Note:</strong> The <strong>data-parent</strong> attribute makes sure that all collapsible elements under the specified parent will be closed when one of the collapsible item is shown.</p>
        <div class="panel-group" id="accordion">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h4 class="panel-title">
                        <a>Collapsible Group 1</a>
                        <span class="pull-right" data-toggle="collapse" data-parent="#accordion" href="#collapse1"><i class="fa fa-angle-down"></i></span>
                    </h4>
                </div>
                </div>
                <div id="collapse1" class="panel-collapse collapse in">
                    <div class="panel-body"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <h4 class="panel-title">
                                    <a>Sub Collapsible Group 1.1</a>
                                    <span class="pull-right" data-toggle="collapse" data-parent="#accordion" href="#collapse2"><i class="fa fa-angle-down"></i></span>
                                </h4>
                            </div>
                            
                        </div>
                        <div id="collapse2" class="panel-collapse collapse">
                                <div class="panel-body"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p></div>
                            </div>
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <h4 class="panel-title">
                                    <a>Sub Collapsible Group 1.2</a>
                                    <span class="pull-right" data-toggle="collapse" data-parent="#accordion" href="#collapse3"><i class="fa fa-angle-down"></i></span>
                                </h4>
                            </div>
                            
                        </div>
                        <div id="collapse3" class="panel-collapse collapse">
                                <div class="panel-body"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p></div>
                            </div>
                    </div>


                </div>
                

        </div>
    </div>

</body>

</html>

Answer 3

collapseList.each(function() {
var collapseId = $(this).attr('id');
$('#' + collapseId).on('show.bs.collapse', function() {
    $(this).closest('.panel').find('.panel-heading').find('.panel-title > a').addClass('dropup');
}).on('hide.bs.collapse', function() {
    $(this).prev('.panel-heading').find('.panel-title > a').removeClass('dropup');
});
 });

You can try this , if not fixed please share the html code for panel you have written.