Bootstrap heading collapses for a second before popping back?
Question
Very new to HTML, CSS, and Bootstrap. Having trouble getting collapse to work right.
I've included a gif of my issue. I'm using bootstrap, and when trying to use collapse on an H4 tag it isn't working right. Not sure what I'm doing wrong. Any help would be appreciated.
Here is my code.
.jumbotron { background-color: #2E2D88; color: white; } /* Adds borders for tabs */ .tab-content { border-left: 1px solid #ddd; border-right: 1px solid #ddd; border-bottom: 1px solid #ddd; padding: 10px; } .nav-tabs { margin-bottom: 0; }
<html lang='en'> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Bootstrap Tutorial</title> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> </head> <body> <div class="container"> <div class="row"> <div class="col-lg-1 col-md-3 col-sm-6 col-xs-12"> <h4>Column 1</h4> <p>Lorem ipsum</p> </div> <div class="col-lg-1 col-md-3 col-sm-6 col-xs-12"> <h4>Column 2</h4> <p>Lorem ipsum</p> </div> <div class="col-lg-1 col-md-3 col-sm-6 col-xs-12"> <h4>Column 3</h4> <p>Lorem ipsum</p> </div> <div class="col-lg-1 col-md-3 col-sm-6 col-xs-12"> <h4>Column 4</h4> <p>Lorem ipsum</p> </div> </div> <div class="row"> <div class="col-lg-1 col-md-3 col-sm-6 col-xs-12"> <h4><a href="#col1content" data-toggle="collapse">Column 1</a></h4> <div id="col1content" class="collapse">Text lorem ipsum.</div> </div> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> </body> </html>
1 answers
solution1
2 ACCPTED 2019-02-28 02:23:17
You are importing Bootstrap JS library which version is v3 while CSS version is v4 . Both CSS and JS have to be the same version.
Import v4 JS library instead then it would work.
.jumbotron { background-color: #2E2D88; color: white; } /* Adds borders for tabs */ .tab-content { border-left: 1px solid #ddd; border-right: 1px solid #ddd; border-bottom: 1px solid #ddd; padding: 10px; } .nav-tabs { margin-bottom: 0; }
<html lang='en'> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Bootstrap Tutorial</title> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> </head> <body> <div class="container"> <div class="row"> <div class="col-lg-1 col-md-3 col-sm-6 col-xs-12"> <h4>Column 1</h4> <p>Lorem ipsum</p> </div> <div class="col-lg-1 col-md-3 col-sm-6 col-xs-12"> <h4>Column 2</h4> <p>Lorem ipsum</p> </div> <div class="col-lg-1 col-md-3 col-sm-6 col-xs-12"> <h4>Column 3</h4> <p>Lorem ipsum</p> </div> <div class="col-lg-1 col-md-3 col-sm-6 col-xs-12"> <h4>Column 4</h4> <p>Lorem ipsum</p> </div> </div> <div class="row"> <div class="col-lg-1 col-md-3 col-sm-6 col-xs-12"> <h4><a href="#col1content" data-toggle="collapse">Column 1</a></h4> <div id="col1content" class="collapse">Text lorem ipsum.</div> </div> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> </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 collapses in chrome on back click not on mozilla
Bootstrap data-toggle collapses div after second click, not first
Button collapses/expands accordions only on second click Bootstrap
How to change the Bootstrap accordion panel heading/title background color when the accordion collapses and is open
Bootstrap carousel collapses
Bootstrap collapses too fast
Trying to build multiple accordions with bootstrap collapse. Clicking on a second accordion collapses the first
Bootstrap collapse not working on table rows - Currently have to click twice before it collapses child rows
Bootstrap collapse button collapses; but not visible
Bootstrap navbar collapses and disappears immediately
Related Tags