Having trouble with bootstrap Accordion
Question
I'm trying to build a very simple webapp that just lists a few accordian style collapsable entries to display and hide small unordered lists. I've been following a few tutorials as I'm not very experienced with bootstrap, but I can't seem to figure out what I'm doing wrong. The collapse feature works just fine, but expanding one does not collapse the other ones. Here's the code I'm working with:
<!DOCTYPE html>
Accordion
<div id="accordian" role="tablist" aria-multiselectable="true">
<div class="card">
<div class="card-header" role="tab" id="headingOne">
<a data-toggle="collapse" href="#one" data-parent="#accordian" aria-expanded="true" aria-controls="one">
<h4 class="mb-0">
One
</h4>
</a>
</div>
<div id="one" class="collapse" role="tabpanel" aria-labelledby="headingOne">
<div class="card-block">
<ul>
<li>A</li>
<li>B</li>
</ul>
</div>
</div>
</div>
<div class="card">
<div class="card-header" role="tab" id="headingTwo">
<a data-toggle="collapse" href="#two" data-parent="#accordian" aria-expanded="false" aria-controls="two">
<h4 class="mb-0">
Two
</h4>
</a>
</div>
<div id="two" class="collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="card-block">
<ul>
<li>C</li>
<li>D</li>
</ul>
</div>
</div>
</div>
</div>
<div data-role="footer">
<h1>Footer</h1>
</div>
</body>
1 answers
solution1
0 2017-02-13 01:15:44
In order for the collapsable items to act as an accordion (collapsing all other collapsable elements when one is opened) you need to add class 'panel-group' to the enclosing div element which contains the collapsable elements. Then just add class 'panel' to all panels within the panel group div.
<div class="panel-group" id="accordian" role="tablist" aria-multiselectable="true"> <div class="panel card"> <div class="card-header " role="tab" id="headingOne"> <a data-toggle="collapse" href="#one" data-parent="#accordian" aria-expanded="true" aria-controls="one"> <h4 class="mb-0"> One </h4> </a> </div> <div id="one" class="collapse" role="tabpanel" aria-labelledby="headingOne"> <div class="card-block"> <ul> <li>A</li> <li>B</li> </ul> </div> </div> </div> <div class="panel card"> <div class="card-header" role="tab" id="headingTwo"> <a data-toggle="collapse" href="#two" data-parent="#accordian" aria-expanded="false" aria-controls="two"> <h4 class="mb-0"> Two </h4> </a> </div> <div id="two" class="collapse" role="tabpanel" aria-labelledby="headingTwo"> <div class="card-block"> <ul> <li>C</li> <li>D</li> </ul> </div> </div> </div> </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.