CODEWITHSUNDEEP
htmlbootstrap-5
Rayhernandez
Rayhernandez

Reputation: 21

accordion button won't collapse

I was taking a lesson on accordions and followed all the steps. However, my button won't collapse when I click on it. Can someone please help me solve this?

When I give it a class of "show", the content is shown but will not collapse when i click on the button. When I remove the "show", the content won't appear when prompted to.

<div class="container mt-3">
      <div class="row justify-content-center">
        <div class="col-md-6">
          <div class="accordion" id="season-1">
            <div class="accordion-item">
              <h2 class="accordion-header" id="episode-1">
                <button
                    class="accordion-button"
                    type="button"
                    data-bs-toggle="collapse"
                    data-bs-target="#episode-1-body"
                    aria-expanded="true"
                    aria-controls="episode-1-body">Episode 1</button>
              </h2>
              <div id="episode-1-body"
                  class="accordion-collapse collapse"
                  aria-labelledby="episode-1"
                  data-bs-parent="#season-1">
                <div class="accordion-body">
                  Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque aut placeat dolor quos beatae tempore. Illo sapiente non, sed saepe ipsum laudantium, at natus consectetur, doloribus ullam laboriosam perspiciatis magni.
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

Upvotes: 0

Views: 387

Answers (1)

Rok Benko
Rok Benko

Reputation: 22930

The code above works as expected IF you include Bootstrap CSS & Bootstrap JS and IF you do it properly (i.e., do not include Bootstrap JS bundle and Bootstrap JS + Popper separately).

See the snippet below.

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>

<div class="container mt-3">
  <div class="row justify-content-center">
    <div class="col-md-6">
      <div class="accordion" id="season-1">
        <div class="accordion-item">
          <h2 class="accordion-header" id="episode-1">
            <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#episode-1-body" aria-expanded="true" aria-controls="episode-1-body">Episode 1</button>
          </h2>
          <div id="episode-1-body" class="accordion-collapse collapse" aria-labelledby="episode-1" data-bs-parent="#season-1">
            <div class="accordion-body">
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque aut placeat dolor quos beatae tempore. Illo sapiente non, sed saepe ipsum laudantium, at natus consectetur, doloribus ullam laboriosam perspiciatis magni.
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Upvotes: 1

Related Questions