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">Heading One<span class="collapse-sign float-right"><i class="fa fa-plus"></i></span> </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">Heading Two <span class="collapse-sign float-right"><i class="fa fa-plus"></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 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">Heading Three <span class="collapse-sign float-right"><i class="fa fa-plus"></i></span> </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">Heading Four<span class="collapse-sign float-right"><i class="fa fa-plus"></i></span> </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 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> </section>