How to use collapse in correct way

Question

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> <div class="accordion" id="accordionExample"> <div class="card"> <div class="card-header"> <div class="card-header-title" style="border-radius:0px;cursor:pointer;" id="headingOne"> <i class="pe-7s-angle-up-circle" style="color:#3d68e0;font-size:16px;" data-toggle="collapse" data-target="#collapseOne"></i> <font data-toggle="collapse" data-target="#collapseOne">Header</font> </div> </div> <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample"> <div class="card-body"> &nbsp;123 </div> </div> </div> <br> <div class="card"> <div class="card-header"> <div class="card-header-title" style="border-radius:0px;cursor:pointer;" id="headingTwo"> <i class="pe-7s-angle-up-circle" style="color:#3d68e0;font-size:16px;" data-toggle="collapse" data-target="#collapseTwo"></i> <font data-toggle="collapse" data-target="#collapseTwo">Detail</font> </div> </div> <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample"> <div class="card-body"> &nbsp;123 </div> </div> </div> <br> <div class="card"> <div class="card-header"> <div class="card-header-title" style="border-radius:0px;cursor:pointer;" id="headingThree"> <i class="pe-7s-angle-up-circle" data-toggle="collapse" data-target="#collapseThree"></i> <font data-toggle="collapse" data-target="#collapseThree">Vendor Price Detail</font> </div> </div> <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample"> <div class="card-body"> &nbsp;123 </div> </div> </div> <br> <div class="card"> <div class="card-header"> <div class="card-header-title" style="border-radius:0px;cursor:pointer;" id="headingFour"> <i class="pe-7s-angle-up-circle" data-toggle="collapse" data-target="#collapseFour"></i> <font data-toggle="collapse" data-target="#collapseThree">Debtor Price Detail</font> </div> </div> <div id="collapseFour" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample"> <div class="card-body"> &nbsp;123 </div> </div> </div> <br /> <div class="card"> <div class="card-header"> <div class="card-header-title" style="border-radius:0px;cursor:pointer;" id="headingFive"> <i class="pe-7s-angle-up-circle" data-toggle="collapse" data-target="#collapseFive"></i> <font data-toggle="collapse" data-target="#collapseThree">Tesco</font> </div> </div> <div id="collapseFive" class="collapse" aria-labelledby="headingFive" data-parent="#accordionExample"> <div class="card-body"> &nbsp;123 </div> </div> </div> </div>

The Code i Copy from link: https://www.tutorialrepublic.com/codelab.php?topic=bootstrap&file=accordion

I just change the button to font

My Problem is:

The code should be toggle but I click 1 more time to close the card body (not working). Only press other collapse then its close.

How to solve this.

Answer 1

The issue you are facing is because <font> have display CSS attribute value inline by default, I would suggest to not using it since its obsolete , to fix the issue I replaced <font> tag with <div>

Note : I also fixed the the collapse attribute for the some of the accordion elements and moved the inline CSS to CSS classes.

 .card-header-title { border-radius:0px; cursor:pointer; }.pe-7s-angle-up-circle { color:#3d68e0; font-size:16px } font { display: block }

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> <div class="accordion" id="accordionExample"> <div class="card"> <div class="card-header"> <div class="card-header-title" id="headingOne"> <i class="pe-7s-angle-up-circle" data-toggle="collapse" data-target="#collapseOne"></i> <div data-toggle="collapse" data-target="#collapseOne">Header</div> </div> </div> <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample"> <div class="card-body"> &nbsp;123 </div> </div> </div> <br> <div class="card"> <div class="card-header"> <div class="card-header-title" id="headingTwo"> <i class="pe-7s-angle-up-circle" data-toggle="collapse" data-target="#collapseTwo"></i> <div data-toggle="collapse" data-target="#collapseTwo">Detail</div> </div> </div> <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample"> <div class="card-body"> &nbsp;123 </div> </div> </div> <br> <div class="card"> <div class="card-header"> <div class="card-header-title" id="headingThree"> <i class="pe-7s-angle-up-circle" data-toggle="collapse" data-target="#collapseThree"></i> <div data-toggle="collapse" data-target="#collapseThree">Vendor Price Detail</div> </div> </div> <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample"> <div class="card-body"> &nbsp;123 </div> </div> </div> <br> <div class="card"> <div class="card-header"> <div class="card-header-title" id="headingFour"> <i class="pe-7s-angle-up-circle" data-toggle="collapse" data-target="#collapseFour"></i> <div data-toggle="collapse" data-target="#collapseFour">Debtor Price Detail</div> </div> </div> <div id="collapseFour" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample"> <div class="card-body"> &nbsp;123 </div> </div> </div> <br /> <div class="card"> <div class="card-header"> <div class="card-header-title" id="headingFive"> <i class="pe-7s-angle-up-circle" data-toggle="collapse" data-target="#collapseFive"></i> <div data-toggle="collapse" data-target="#collapseFive">Tesco</div> </div> </div> <div id="collapseFive" class="collapse" aria-labelledby="headingFive" data-parent="#accordionExample"> <div class="card-body"> &nbsp;123 </div> </div> </div> </div>