No Description Available
Bootstrap 4 Accordion
2369 18 January 2020
Abhishek Singh
~ onex0
No Description Available
$('.collapse').on('show.bs.collapse', function () {
var obj = $("[aria-controls="+$(this).attr('id')+"]").find('.collapse-sign');
obj.html('<i class="fas fa-angle-down"></i>');
// console.log(obj.html());
});
$('.collapse').on('hidden.bs.collapse', function () {
var obj = $("[aria-controls="+$(this).attr('id')+"]").find('.collapse-sign');
obj.html('<i class="fas fa-angle-up"></i>')
// console.log(obj.html());
})
<div class="container">
<div class="row">
<div class="col-md-6 offset-md-3 mt-5">
<div class="card">
<div class="card-body">
<h4>Itinerary</h4>
<div class="accordion" id="accordionExample">
<div class="card">
<div class="card-header" id="headingOne">
<h2 class="mb-0">
<button class="btn btn-link adp-flex-btn" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"><span class="txt-clr">Day 1</span> | Night Safari: Arrival <span class="collapse-sign float-right"><i class="fas fa-angle-up"></i></span>
</button>
<ul class="package-tags">
<li>Arival</li>
<li>Night Safari</li>
</ul>
</h2>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
<div class="card-body">orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingTwo">
<h2 class="mb-0">
<button class="btn btn-link collapsed adp-flex-btn" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"><span class="txt-clr">Day 2</span> | <span class="txt-hd">Check out from the hotel and then check </span> <span class="collapse-sign float-right"><i class="fas fa-angle-down"></i></span>
</button>
</h2>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
<div class="card-body">orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>