Bootstrap nested accordion font-awesome icons
16,809
Solution 1
I prefer to use examples form the Bootstrap documentation and toggle icons by CSS.
And I've added Font Awesome icons as a content of the :after pseudo-element.
Bootstrap 4
Based on the Accordion example.
Please check the result: CodePen
@import url('https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css');
@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
.mb-0 > a {
display: block;
position: relative;
}
.mb-0 > a:after {
content: "\f078"; /* fa-chevron-down */
font-family: 'FontAwesome';
position: absolute;
right: 0;
}
.mb-0 > a[aria-expanded="true"]:after {
content: "\f077"; /* fa-chevron-up */
}<div id="accordion">
<div class="card">
<div class="card-header" id="heading-1">
<h5 class="mb-0">
<a role="button" data-toggle="collapse" href="#collapse-1" aria-expanded="true" aria-controls="collapse-1">
Item 1
</a>
</h5>
</div>
<div id="collapse-1" class="collapse show" data-parent="#accordion" aria-labelledby="heading-1">
<div class="card-body">
<div id="accordion-1">
<div class="card">
<div class="card-header" id="heading-1-1">
<h5 class="mb-0">
<a class="collapsed" role="button" data-toggle="collapse" href="#collapse-1-1" aria-expanded="false" aria-controls="collapse-1-1">
Item 1 > 1
</a>
</h5>
</div>
<div id="collapse-1-1" class="collapse" data-parent="#accordion-1" aria-labelledby="heading-1-1">
<div class="card-body">
<div id="accordion-1-1">
<div class="card">
<div class="card-header" id="heading-1-1-1">
<h5 class="mb-0">
<a class="collapsed" role="button" data-toggle="collapse" href="#collapse-1-1-1" aria-expanded="false" aria-controls="collapse-1-1-1">
Item 1 > 1 > 1
</a>
</h5>
</div>
<div id="collapse-1-1-1" class="collapse" data-parent="#accordion-1-1" aria-labelledby="heading-1-1-1">
<div class="card-body">
Text 1 > 1 > 1
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="heading-1-1-2">
<h5 class="mb-0">
<a class="collapsed" role="button" data-toggle="collapse" href="#collapse-1-1-2" aria-expanded="false" aria-controls="collapse-1-1-2">
Item 1 > 1 > 2
</a>
</h5>
</div>
<div id="collapse-1-1-2" class="collapse" data-parent="#accordion-1-1" aria-labelledby="heading-1-1-2">
<div class="card-body">
Text 1 > 1 > 2
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="heading-1-1-3">
<h5 class="mb-0">
<a class="collapsed" role="button" data-toggle="collapse" href="#collapse-1-1-3" aria-expanded="false" aria-controls="collapse-1-1-3">
Item 1 > 1 > 3
</a>
</h5>
</div>
<div id="collapse-1-1-3" class="collapse" data-parent="#accordion-1-1" aria-labelledby="heading-1-1-3">
<div class="card-body">
Text 1 > 1 > 3
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="heading-1-2">
<h5 class="mb-0">
<a class="collapsed" role="button" data-toggle="collapse" href="#collapse-1-2" aria-expanded="false" aria-controls="collapse-1-2">
Item 1 > 2
</a>
</h5>
</div>
<div id="collapse-1-2" class="collapse" data-parent="#accordion-1" aria-labelledby="heading-1-2">
<div class="card-body">
Text 1 > 2
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="heading-2">
<h5 class="mb-0">
<a class="collapsed" role="button" data-toggle="collapse" href="#collapse-2" aria-expanded="false" aria-controls="collapse-2">
Item 2
</a>
</h5>
</div>
<div id="collapse-2" class="collapse" data-parent="#accordion" aria-labelledby="heading-2">
<div class="card-body">
Text 2
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="heading-3">
<h5 class="mb-0">
<a class="collapsed" role="button" data-toggle="collapse" href="#collapse-3" aria-expanded="false" aria-controls="collapse-3">
Item 3
</a>
</h5>
</div>
<div id="collapse-3" class="collapse" data-parent="#accordion" aria-labelledby="heading-3">
<div class="card-body">
Text 3
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>Bootstrap 3
Based on the Accordion example.
Please check the result: CodePen • JSFiddle
@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
.panel-title > a {
display: block;
position: relative;
}
.panel-title > a:after {
content: "\f078"; /* fa-chevron-down */
font-family: 'FontAwesome';
position: absolute;
right: 0;
}
.panel-title > a[aria-expanded="true"]:after {
content: "\f077"; /* fa-chevron-up */
}<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="heading-1">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse-1" aria-expanded="true" aria-controls="collapse-1">
Item 1
</a>
</h4>
</div>
<div id="collapse-1" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="heading-1">
<div class="panel-body">
<div class="panel-group" id="accordion-1" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="heading-1-1">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion-1" href="#collapse-1-1" aria-expanded="false" aria-controls="collapse-1-1">
Item 1 > 1
</a>
</h4>
</div>
<div id="collapse-1-1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-1-1">
<div class="panel-body">
<div class="panel-group" id="accordion-1-1" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="heading-1-1-1">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion-1-1" href="#collapse-1-1-1" aria-expanded="false" aria-controls="collapse-1-1-1">
Item 1 > 1 > 1
</a>
</h4>
</div>
<div id="collapse-1-1-1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-1-1-1">
<div class="panel-body">
Text 1 > 1 > 1
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="heading-1-1-2">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion-1-1" href="#collapse-1-1-2" aria-expanded="false" aria-controls="collapse-1-1-2">
Item 1 > 1 > 2
</a>
</h4>
</div>
<div id="collapse-1-1-2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-1-1-2">
<div class="panel-body">
Text 1 > 1 > 2
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="heading-1-1-3">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion-1-1" href="#collapse-1-1-3" aria-expanded="false" aria-controls="collapse-1-1-3">
Item 1 > 1 > 3
</a>
</h4>
</div>
<div id="collapse-1-1-3" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-1-1-3">
<div class="panel-body">
Text 1 > 1 > 3
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="heading-1-2">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion-1" href="#collapse-1-2" aria-expanded="false" aria-controls="collapse-1-2">
Item 1 > 2
</a>
</h4>
</div>
<div id="collapse-1-2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-1-2">
<div class="panel-body">
Text 1 > 2
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="heading-2">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse-2" aria-expanded="false" aria-controls="collapse-2">
Item 2
</a>
</h4>
</div>
<div id="collapse-2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-2">
<div class="panel-body">
Text 2
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="heading-3">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse-3" aria-expanded="false" aria-controls="collapse-3">
Item 3
</a>
</h4>
</div>
<div id="collapse-3" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-3">
<div class="panel-body">
Text 3
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>Solution 2
Found an existing jsFiddle: http://jsfiddle.net/zessx/r6eaw/12/ and with a little copy-paste, one with a nested accordion: http://jsfiddle.net/R6EAW/3979/
One of the issues with your code is that you are nesting div's in anchor (<a/>) tags. That is not allowed.
Solution 3
Here's a simple example, with this, initially show the icons correctly using Jquery and Bootstrap.
¡May it be very helpful to you!
$(function(){
$('.panel-title a[data-toggle="collapse"]').on('click', this, function(event) {
$('.panel-collapse').on('show.bs.collapse', function () {
$(this).siblings('.panel-heading').find('i').removeClass('fa-plus-circle').addClass('fa-minus-circle');
});
$('.panel-collapse').on('hide.bs.collapse', function () {
$(this).siblings('.panel-heading').find('i').removeClass('fa-minus-circle').addClass('fa-plus-circle');
});
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<!-- Panel -->
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="item001">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#detail001" aria-expanded="true" aria-controls="detail001">
<div class="title">Title 1 <i class="fa fa-minus-circle" aria-hidden="true"></i></div>
</a>
</h4>
</div>
<div id="detail001" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="item001">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<!--/ Panel -->
<!-- Panel -->
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="item002">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#detail002" aria-expanded="true" aria-controls="detail002">
<div class="title">Title 2 <i class="fa fa-plus-circle" aria-hidden="true"></i></div>
</a>
</h4>
</div>
<div id="detail002" class="panel-collapse collapse" role="tabpanel" aria-labelledby="item002">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<!--/ Panel -->
</div>
Author by
Janshair Khan
I’m a DevOps Engineer with expertise in several areas including Cloud Computing, Distributed Systems, Containers, Embedded Systems, OSS, Security and more.
Updated on June 17, 2022Comments
-
Janshair Khan almost 2 years
I've a 3 level nested bootstrap accordion which is working fine, but I want a change in the panel-heading div where I can use a font-awesome icon
fa fa-chevron-downwhen the accordion is opened (Without affecting the nested accordions) andfa fa-chevron-rightwhen accordion is collapsed. I'm using this code to changing the icon:$('div.panel-collapse.collapse').on('shown.bs.collapse', function() { $(this).parent().find(".fa-chevron-right").removeClass("fa-chevron-right").addClass("fa-chevron-down"); $(this).parent().find('.panel-heading').css('background', '#0271BC'); }).on('hidden.bs.collapse', function() { $(this).parent().find(".fa-chevron-down").removeClass("fa-chevron-down").addClass("fa-chevron-right"); $(this).parent().find('.panel-heading').css('background', '#02A4EF'); });<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet"> <a href="#aspnetcore" class="accordion-toggle tutorial-panel-heading" data-toggle="collapse" data-parent="#accordion"> <div class="panel panel-default"> <div class="panel-heading outer web"> <h4 class="panel-title fonter font-light-text"> <i class="fa fa-chevron-down pull-right"></i> Getting Starting with ASP.NET Core 1.0 </h4> </div> <div id="aspnetcore" class="panel-collapse collapse outer-arrow"> <div class="panel-body"> <div class="panel-group" id="webdevelopment"> <a href="#frontend" class="accordion-toggle tutorial-panel-heading" data-toggle="collapse" data-parent="#webdevelopment"> <div class="panel panel-default"> <div class="panel-heading middle-link-web"> <h4 class="panel-title font-light-text"> <i class="fa fa-chevron-down pull-right"></i> Front-End </h4> </div> <div id="frontend" class="panel-collpase collapse outer-arrow"> <div class="panel-body"> <div class="panel-group" id="webdevelopment"> <a asp-controller="Web" asp-action="Grunt" class="accordion-toggle lab-link"> <div class="panel panel-default"> <div class="panel-heading middle-link"> <h4 class="panel-title font-light-text"> Grunt Task Runner </h4> </div> </div> </a> <a href="#angular" class="accordion-toggle tutorial-panel-heading inner-link" data-toggle="collapse" data-parent="#frontend"> <div class="panel panel-default"> <div class="panel-heading middle-link-web"> <h4 class="panel-title font-light-text"> <i class="fa fa-chevron-down pull-right"></i> Angular 2 </h4> </div> <div id="angular" class="panel-collpase collapse"> <div class="panel-body"> <a asp-controller="Web" asp-action="Angular" class="accordion-toggle lab-link"> <div class="panel panel-default"> <div class="panel-heading middle-link"> <h4 class="panel-title font-light-text"> Introduction to Angular 2 </h4> </div> </div> </a> </div> </div> </div> </a> <a class="accordion-toggle lab-link"> <div class="panel panel-default"> <div class="panel-heading middle-link"> <h4 class="panel-title font-light-text"> LESS and SASS <i class="fa fa-cog fa-spin fa-fw"></i> </h4> </div> </div> </a> </div> </div> </div> </div> </a> <a href="#backend" class="accordion-toggle tutorial-panel-heading" data-toggle="collapse" data-parent="#webdevelopment"> <div class="panel panel-default"> <div class="panel-heading middle-link-web"> <h4 class="panel-title font-light-text"> <i class="fa fa-chevron-down pull-right"></i> Back-End </h4> </div> </div> </a> </div> </div> </div> </div> </a> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>But this code also change the icons of the nested accordions which are not opened yet. Is there any better way to resolve this issue will be appreciated.