Just starting out with HTML, CSS, and Bootstrap, but struggling with getting collapse to function properly.
I've attached a gif demonstrating the issue I'm facing. While using bootstrap, collapse on an H4 tag is not working as expected. Can't figure out what's going wrong. Any assistance would be greatly appreciated.
Check out the GIF
Highlighted below is my code snippet:
.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>