Having trouble with the bootstrap accordion feature.
When the page loads, the accordions are expanded by default instead of being collapsed.
I want them to start collapsed and then expand when clicked.
Here is the HTML code:
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>bootstrap accordion</title>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.css'><link rel="stylesheet" href="./style3.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montserrat|Tomorrow&display=swap" rel="stylesheet">
</head>
<body>
<!-- partial:index.partial.html -->
<section class="container">
<div id="accordion" class="accordion-container">
<div class="card">
<div class="card-header" id="headingOne">
<h5 class="mb-0">
<button id="radio" class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
aaaa
</button>
</h5>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
<div class="card-body">
<p id="forward">aaaabooooody</p>
</div>
</div>
</div>
</div>
<div id="accordion" class="accordion-container">
<div class="card">
<div class="card-header" id="headingOne">
<h5 class="mb-0">
<button id="radio" class="btn btn-link" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
bbbbbbb
</button>
</h5>
</div>
<div id="collapseTwo" class="collapse show" aria-labelledby="headingTwo" data-parent="#accordion">
<div class="card-body">
<p id="forward">bbbbbbbbblaankkkk</p>
</div>
</div>
</div>
</div>
</section>
<!-- partial -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.min.js'></script>
</body>
</html>
//////CSS CODE BELOW
.accordion-container .card .card-header button.btn:after {
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.accordion-container .card .card-header {
position: relative;
background-color: #00d2ff;
}
.accordion-container .card .card-header .btn-link {
color: #FFF;
font-family: 'Montserrat', sans-serif;
font-size: 28px;
/*font-weight: 600;*/
line-height: 23px;
}
.accordion-container .card .card-header button.btn.collapsed:after {
background-image: url();
}
.accordion-container .card .card-header button.btn:not(.collapsed):after {
background-image: url();
}
.accordion-container .card .card-header button.btn-link {
width: 100%;
text-align: left;
}
.accordion-container .card .card-header button.btn:after {
content: '';
background-repeat: no-repeat;
background-position: 50%;
width: 3rem;
height: 3rem;
text-align: center;
float: right;
padding: .7rem;
border: 1px solid #ffff;
border-radius: 50%;
}
.accordion-container .card .card-header button.btn.collapsed:after {
background-color: rgba(255, 255, 255, 0.31);
}
.accordion-container .card .card-header button.btn:not(.collapsed):after {
background-color: white;
}
.accordion-container .card .card-header button.btn-link:not(.collapsed)::before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: #FFF;
opacity: .31;
}
.accordion-container .card .card-body {
color: white;
background-color: #FFF;
color: #000000;
font-family: 'Open Sans', sans-serif;
font-size: 18px;
font-weight: 300;
line-height: 19px;
}
This is what I expected on page load:
https://i.stack.imgur.com/nPpSe.png
But this is what I'm seeing initially:
https://i.stack.imgur.com/Mun1p.png