Bootstrap Nested Accordion Font-awesome Icons
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-down when the accord
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 */
}<divid="accordion"><divclass="card"><divclass="card-header"id="heading-1"><h5class="mb-0"><arole="button"data-toggle="collapse"href="#collapse-1"aria-expanded="true"aria-controls="collapse-1">
Item 1
</a></h5></div><divid="collapse-1"class="collapse show"data-parent="#accordion"aria-labelledby="heading-1"><divclass="card-body"><divid="accordion-1"><divclass="card"><divclass="card-header"id="heading-1-1"><h5class="mb-0"><aclass="collapsed"role="button"data-toggle="collapse"href="#collapse-1-1"aria-expanded="false"aria-controls="collapse-1-1">
Item 1 > 1
</a></h5></div><divid="collapse-1-1"class="collapse"data-parent="#accordion-1"aria-labelledby="heading-1-1"><divclass="card-body"><divid="accordion-1-1"><divclass="card"><divclass="card-header"id="heading-1-1-1"><h5class="mb-0"><aclass="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><divid="collapse-1-1-1"class="collapse"data-parent="#accordion-1-1"aria-labelledby="heading-1-1-1"><divclass="card-body">
Text 1 > 1 > 1
</div></div></div><divclass="card"><divclass="card-header"id="heading-1-1-2"><h5class="mb-0"><aclass="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><divid="collapse-1-1-2"class="collapse"data-parent="#accordion-1-1"aria-labelledby="heading-1-1-2"><divclass="card-body">
Text 1 > 1 > 2
</div></div></div><divclass="card"><divclass="card-header"id="heading-1-1-3"><h5class="mb-0"><aclass="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><divid="collapse-1-1-3"class="collapse"data-parent="#accordion-1-1"aria-labelledby="heading-1-1-3"><divclass="card-body">
Text 1 > 1 > 3
</div></div></div></div></div></div></div><divclass="card"><divclass="card-header"id="heading-1-2"><h5class="mb-0"><aclass="collapsed"role="button"data-toggle="collapse"href="#collapse-1-2"aria-expanded="false"aria-controls="collapse-1-2">
Item 1 > 2
</a></h5></div><divid="collapse-1-2"class="collapse"data-parent="#accordion-1"aria-labelledby="heading-1-2"><divclass="card-body">
Text 1 > 2
</div></div></div></div></div></div></div><divclass="card"><divclass="card-header"id="heading-2"><h5class="mb-0"><aclass="collapsed"role="button"data-toggle="collapse"href="#collapse-2"aria-expanded="false"aria-controls="collapse-2">
Item 2
</a></h5></div><divid="collapse-2"class="collapse"data-parent="#accordion"aria-labelledby="heading-2"><divclass="card-body">
Text 2
</div></div></div><divclass="card"><divclass="card-header"id="heading-3"><h5class="mb-0"><aclass="collapsed"role="button"data-toggle="collapse"href="#collapse-3"aria-expanded="false"aria-controls="collapse-3">
Item 3
</a></h5></div><divid="collapse-3"class="collapse"data-parent="#accordion"aria-labelledby="heading-3"><divclass="card-body">
Text 3
</div></div></div></div><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><scriptsrc="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 */
}<divclass="panel-group"id="accordion"role="tablist"aria-multiselectable="true"><divclass="panel panel-default"><divclass="panel-heading"role="tab"id="heading-1"><h4class="panel-title"><arole="button"data-toggle="collapse"data-parent="#accordion"href="#collapse-1"aria-expanded="true"aria-controls="collapse-1">
Item 1
</a></h4></div><divid="collapse-1"class="panel-collapse collapse in"role="tabpanel"aria-labelledby="heading-1"><divclass="panel-body"><divclass="panel-group"id="accordion-1"role="tablist"aria-multiselectable="true"><divclass="panel panel-default"><divclass="panel-heading"role="tab"id="heading-1-1"><h4class="panel-title"><arole="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><divid="collapse-1-1"class="panel-collapse collapse"role="tabpanel"aria-labelledby="heading-1-1"><divclass="panel-body"><divclass="panel-group"id="accordion-1-1"role="tablist"aria-multiselectable="true"><divclass="panel panel-default"><divclass="panel-heading"role="tab"id="heading-1-1-1"><h4class="panel-title"><arole="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><divid="collapse-1-1-1"class="panel-collapse collapse"role="tabpanel"aria-labelledby="heading-1-1-1"><divclass="panel-body">
Text 1 > 1 > 1
</div></div></div><divclass="panel panel-default"><divclass="panel-heading"role="tab"id="heading-1-1-2"><h4class="panel-title"><aclass="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><divid="collapse-1-1-2"class="panel-collapse collapse"role="tabpanel"aria-labelledby="heading-1-1-2"><divclass="panel-body">
Text 1 > 1 > 2
</div></div></div><divclass="panel panel-default"><divclass="panel-heading"role="tab"id="heading-1-1-3"><h4class="panel-title"><aclass="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><divid="collapse-1-1-3"class="panel-collapse collapse"role="tabpanel"aria-labelledby="heading-1-1-3"><divclass="panel-body">
Text 1 > 1 > 3
</div></div></div></div></div></div></div><divclass="panel panel-default"><divclass="panel-heading"role="tab"id="heading-1-2"><h4class="panel-title"><aclass="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><divid="collapse-1-2"class="panel-collapse collapse"role="tabpanel"aria-labelledby="heading-1-2"><divclass="panel-body">
Text 1 > 2
</div></div></div></div></div></div></div><divclass="panel panel-default"><divclass="panel-heading"role="tab"id="heading-2"><h4class="panel-title"><aclass="collapsed"role="button"data-toggle="collapse"data-parent="#accordion"href="#collapse-2"aria-expanded="false"aria-controls="collapse-2">
Item 2
</a></h4></div><divid="collapse-2"class="panel-collapse collapse"role="tabpanel"aria-labelledby="heading-2"><divclass="panel-body">
Text 2
</div></div></div><divclass="panel panel-default"><divclass="panel-heading"role="tab"id="heading-3"><h4class="panel-title"><aclass="collapsed"role="button"data-toggle="collapse"data-parent="#accordion"href="#collapse-3"aria-expanded="false"aria-controls="collapse-3">
Item 3
</a></h4></div><divid="collapse-3"class="panel-collapse collapse"role="tabpanel"aria-labelledby="heading-3"><divclass="panel-body">
Text 3
</div></div></div></div><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script><scriptsrc="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');
});
});
});<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script><linkhref="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css"rel="stylesheet"><linkhref="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"rel="stylesheet"><divclass="panel-group"id="accordion"role="tablist"aria-multiselectable="true"><!-- Panel --><divclass="panel panel-default"><divclass="panel-heading"role="tab"id="item001"><h4class="panel-title"><arole="button"data-toggle="collapse"data-parent="#accordion"href="#detail001"aria-expanded="true"aria-controls="detail001"><divclass="title">Title 1 <iclass="fa fa-minus-circle"aria-hidden="true"></i></div></a></h4></div><divid="detail001"class="panel-collapse collapse in"role="tabpanel"aria-labelledby="item001"><divclass="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 --><divclass="panel panel-default"><divclass="panel-heading"role="tab"id="item002"><h4class="panel-title"><arole="button"data-toggle="collapse"data-parent="#accordion"href="#detail002"aria-expanded="true"aria-controls="detail002"><divclass="title">Title 2 <iclass="fa fa-plus-circle"aria-hidden="true"></i></div></a></h4></div><divid="detail002"class="panel-collapse collapse"role="tabpanel"aria-labelledby="item002"><divclass="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>
Post a Comment for "Bootstrap Nested Accordion Font-awesome Icons"