CODEWITHSUNDEEP
twitter-bootstrapaccordion
Tamra R
Tamra R

Reputation: 11

Bootstrap accordion is not collapsing

I am new to Bootstrap. I have an accordion element that is working almost perfectly, except for one issue. When I select a new panel it opens properly but does not auto close the last open panel. I can open all three at once, in fact. I've found this issue on Stack Overflow, but in all cases the problem was related to not setting the data-parent attribute to the wrapper div id (or, omitting the # in front of the data-parent name). But that is not the issue in my case. I'm using Bootstrap 4. I have tested my accordion in a Fiddle using the latest Bootstrap CDN and Jquery links. Same issue there, so it's not that something in my code is conflicting. Obviously, I'm missing something (probably something simple!). Any help appreciated. Here is my code. 

<div id="methodsaccordion" role="tablist" aria-multiselectable="true">

<div class="card mb-3">
    <div class="card-header" role="tab" id="headingOne">
        <h5 class="mb-0">
            <a data-toggle="collapse" data-parent="#methodsaccordion" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
                <img class="img-fluid" src="img/image.jpg" style="width: 10%" />
                Child 0-2 years of age
            </a>
        </h5>
    </div>
    <div id="collapseOne" class="collapse" role="tabpanel" aria-labelledby="headingOne">
        <div class="card-block">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed ...
        </div> <!-- end card block -->
    </div> <!-- end collapse 1 -->
</div> <!-- end card -->

<div class="card mb-3">
    <div class="card-header" role="tab" id="headingTwo">
        <h5 class="mb-0">
            <a data-toggle="collapse" data-parent="#methodsaccordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                <img class="img-fluid" src="img/image.jpg" style="width: 10%" />
                Child 2-5 years of age
            </a>
        </h5>
    </div>
    <div id="collapseTwo" class="collapse" role="tabpanel" aria-labelledby="headingTwo">
        <div class="card-block">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed ...
        </div> <!-- end card block -->
    </div> <!-- end collapse 2 -->
</div> <!-- end card -->

<div class="card">
    <div class="card-header" role="tab" id="headingThree">
        <h5 class="mb-0">
            <a data-toggle="collapse" data-parent="#methodsaccordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                <img class="img-fluid" src="img/image.jpg" style="width: 10%" />
                Child over 5 years of age
            </a>
        </h5>
    </div>
    <div id="collapseThree" class="collapse" role="tabpanel" aria-labelledby="headingThree">
            <div class="card-block">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed ....
        </div> <!-- end card block -->
    </div> <!-- end collapse 3 -->
</div> <!-- end card -->

Upvotes: 1

Views: 2949

Answers (1)

Broly Cjw
Broly Cjw

Reputation: 11

It appears this is a regression with the official release of Bootstrap 4. You need to move the data-parent to the collapsible content rather than collapse link.

The correct code should be this:

<div id="methodsaccordion" role="tablist" aria-multiselectable="true">
  <div class="card mb-3">
    <div class="card-header" role="tab" id="headingOne">
      <h5 class="mb-0">
        <a data-toggle="collapse" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
          <img class="img-fluid" src="img/image.jpg" style="width: 10%" />
          Child 0-2 years of age
        </a>
      </h5>
    </div>
    <div id="collapseOne" class="collapse" role="tabpanel" data-parent="#methodsaccordion" aria-labelledby="headingOne">
      <div class="card-block">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed ...
      </div> <!-- end card block -->
    </div> <!-- end collapse 1 -->
  </div> <!-- end card -->

  <div class="card mb-3">
    <div class="card-header" role="tab" id="headingTwo">
      <h5 class="mb-0">
        <a data-toggle="collapse" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          <img class="img-fluid" src="img/image.jpg" style="width: 10%" />
          Child 2-5 years of age
        </a>
      </h5>
    </div>
    <div id="collapseTwo" class="collapse" role="tabpanel" data-parent="#methodsaccordion" aria-labelledby="headingTwo">
      <div class="card-block">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed ...
      </div> <!-- end card block -->
    </div> <!-- end collapse 2 -->
  </div> <!-- end card -->

  <div class="card">
    <div class="card-header" role="tab" id="headingThree">
      <h5 class="mb-0">
        <a data-toggle="collapse" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          <img class="img-fluid" src="img/image.jpg" style="width: 10%" />
          Child over 5 years of age
        </a>
      </h5>
    </div>
    <div id="collapseThree" class="collapse" role="tabpanel" data-parent="#methodsaccordion" aria-labelledby="headingThree">
      <div class="card-block">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed ....
      </div> <!-- end card block -->
    </div> <!-- end collapse 3 -->
  </div> <!-- end card -->
</div>

Upvotes: 1

Related Questions