No Description Available
Bootstrap Collapse with Plus-minus
860 06 October 2019
Abhishek Singh
~ onex1
Hide and Show content of your project webpage with Bootstrap Collapse or Accordion.
No Description Available
1
Hide and Show content of your project webpage with Bootstrap Collapse or Accordion.
$('.collapse').on('show.bs.collapse', function () {
var obj = $("[aria-controls="+$(this).attr('id')+"]").find('.collapse-sign');
obj.html('<i class="fa fa-minus"></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="fa fa-plus"></i>')
// console.log(obj.html());
})
<section class="accordion-section">
<div class="container">
<div class="accordion" id="accordionExample">
<div class="card">
<div class="card-header" id="headingOne">
<h2 class="mb-0">
<button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"><span class="collapse-sign float-left"><i class="fa fa-plus"></i></span> Heading One
</button>
</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" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"><span class="collapse-sign float-left"><i class="fa fa-plus"></i></span> Heading Two
</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 class="card">
<div class="card-header" id="headingThree">
<h2 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree"><span class="collapse-sign float-left"><i class="fa fa-plus"></i></span> Heading Three
</button>
</h2>
</div>
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" 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="headingFour">
<h2 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour"><span class="collapse-sign float-left"><i class="fa fa-plus"></i></span> Heading Four
</button>
</h2>
</div>
<div id="collapseFour" class="collapse" aria-labelledby="headingFour" 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 rvived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</div>
</div>
</div>
</div>
</div>
</section>