Bootstrap accordion not working
Question
I've been trying to make a collapse accordion to work, but when i click the links nothing happens, the other items are not expanding and the first is not collapsing. The body is split in 3 columns (1-10-1) and the accordion is placed in the middle. I'm using bootstrap 3.3.7 and jquery 3.2.1. Is this happening due to how my tags are laid, or is something to do with jquery?
HTML:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> </head> <body> <!-- Body --> <div class="container"> <div class="row"> <div class="col-lg-1"></div> <div class="col-lg-10"> <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="heading1"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapse1" aria-expanded="true" aria-controls="collapse1"> Panel 1 </a> </h4> </div> <div id="collapse1" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="heading1"> <div class="panel-body"> <p>Text for 1</p> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="heading2"> <h4 class="panel-title"> <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse2" aria-expanded="false" aria-controls="collapse2"> Panel 2 </a> </h4> </div> <div id="collapse2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading2"> <div class="panel-body"> <p>Text for 2</p> </div> </div> </div> </div> </div> <div class="col-lg-1"></div> </div> </div> <!-- Body --> </body> </html>
1 answers
solution1
0 ACCPTED 2017-07-02 09:43:39
Add jQuery lib before bootstrap.js . Because bootstrap internally uses jQuery.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> </head> <body> <!-- Body --> <div class="container"> <div class="row"> <div class="col-lg-1"></div> <div class="col-lg-10"> <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="heading1"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapse1" aria-expanded="true" aria-controls="collapse1"> Panel 1 </a> </h4> </div> <div id="collapse1" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="heading1"> <div class="panel-body"> <p>Text for 1</p> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="heading2"> <h4 class="panel-title"> <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse2" aria-expanded="false" aria-controls="collapse2"> Panel 2 </a> </h4> </div> <div id="collapse2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading2"> <div class="panel-body"> <p>Text for 2</p> </div> </div> </div> </div> </div> <div class="col-lg-1"></div> </div> </div> <!-- Body --> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Bootstrap accordion not working.
Bootstrap Forms Accordion is not working
Bootstrap Accordion Collapse not working
Bootstrap accordion not working with angular 7
bootstrap accordion not working properly
Bootstrap Accordion not working well
Bootstrap accordion not working in angular 9
Bootstrap 4 Checkbox accordion not working
Bootstrap/Jquery accordion not working propertly
React Bootstrap Accordion not working with NextJS
Related Tags