aria-expanded equals to false not working

Question

I am experiencing an issue using bootstrap accordion.
On loading the page, the accordions are expanded by default, contrary to what I want.
I expect them to be collapsed by default then on click, they get expanded.
HTML code below:

<!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.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 the expected behaviour on loading:
However this is what I get on loading the page:

Answer 1

change class="collapse show" to class="collapse" . Then it works as your expect.

And you might also check this one out aria-expanded html attribute

aria-expanded equals to false not working

Question

1 answers

solution1
0 ACCPTED 2019-11-18 16:18:43

aria-expanded equals to false not working

Question

1 answers

solution1 0 ACCPTED 2019-11-18 16:18:43

solution1
0 ACCPTED 2019-11-18 16:18:43