[英]Bootstrap Collapse Accordion one panel open, all others close
I have created two bootstrap accordions, one below the other. 我创造了两个自举手风琴,一个在另一个之下。 I did not like the way that the panels were awkwardly shifting locations when I had them all as one accordion, so I created two separate accordions.
当我将它们全部作为一个手风琴时,我不喜欢面板笨拙地移动位置的方式,因此我创建了两个独立的手风琴。 In doing so, each accordion works the way I would like: only one panel-body can be open at a time per accordion, but I would like to only allow one panel-body to be open..
在这样做时,每支手风琴都按照我想要的方式工作:每个手风琴一次只能打开一个面板体,但我想只允许一个面板体打开..
To better explain what I mean... Currently, you can have one panel-body opened in both the top and bottom row. 为了更好地解释我的意思......目前,您可以在顶行和底行中打开一个面板主体。 I want you just to be able to have one opened at a time.
我希望你能够一次打开一个。
Is this possible to do? 这可能吗?
Here is an example of what I have made https://codepen.io/aahmed2/pen/yOQvVz 这是我所做的一个例子https://codepen.io/aahmed2/pen/yOQvVz
Here is my code. 这是我的代码。
<div class="row">
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default col-md-4">
<div class="panel-heading bites-stings" role="tab" id="headingSeven">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
<h2>Bites and Stings</h2>
</a>
</div>
<div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
<a href="health-resources/mosquitoes.html"><h4>Mosquitoes</h4></a>
<a href="health-resources/ticks.html"><h4>Ticks</h4></a>
<a href="#"><h4>Bees and Wasps</h4></a>
<a href="#"><h4>Animal Bites</h4></a>
</div>
</div>
</div>
<div class="panel panel-default col-md-4">
<div class="panel-heading pet-health" role="tab" id="headingTwo">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
<h2>Pet Health and Safety</h2>
</a>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
<a href="#"><h4>Pet Allergies</h4></a>
<a href="#"><h4>Toxic Plants</h4></a>
<a href="#"><h4>Pet and Wildlife Encounters</h4></a>
</div>
</div>
</div>
<div class="panel panel-default col-md-4">
<div class="panel-heading livestock-health" role="tab" id="headingThree">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
<h2>Livestock Health and Safety</h2>
</a>
</div>
<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="panel-body">
<a href="#"><h4>This is a Topic</h4></a>
<a href="#"><h4>Topic 2</h4></a>
<a href="#"><h4>Another Topic</h4></a>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="panel-group" id="accordion2" role="tablist" aria-multiselectable="true">
<div class="panel panel-default col-md-4">
<div class="panel-heading zoonotic" role="tab" id="headingFour">
<a role="button" data-toggle="collapse" data-parent="#accordion2" href="#collapseFour" aria-expanded="true" aria-controls="collapseFour">
<h2>Zoonotic Diseases</h2>
</a>
</div>
<div id="collapseFour" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFour">
<div class="panel-body">
<a href="#"><h4>Bacterial</h4></a>
<a href="#"><h4>Fungal</h4></a>
<a href="#"><h4>Parasitic</h4></a>
<a href="#"><h4>Prionotic</h4></a>
<a href="#"><h4>Rickettsial</h4></a>
<a href="#"><h4>Spirochetes</h4></a>
<a href="#"><h4>Viral</h4></a>
</div>
</div>
</div>
<div class="panel panel-default col-md-4">
<div class="panel-heading allergies" role="tab" id="headingFive">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion2" href="#collapseFive" aria-expanded="false" aria-controls="collapseFive">
<h2>Allergies</h2>
</a>
</div>
<div id="collapseFive" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFive">
<div class="panel-body">
<a href="#"><h4>Animal Allergies</h4></a>
<a href="#"><h4>Environmental Allergies</h4></a>
</div>
</div>
</div>
<div class="panel panel-default col-md-4">
<div class="panel-heading environment-health" role="tab" id="headingSix">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion2" href="#collapseSix" aria-expanded="false" aria-controls="collapseSix">
<h2>Environmental Health</h2>
</a>
</div>
<div id="collapseSix" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingSix">
<div class="panel-body">
<a href="#"><h4>This is a Topic</h4></a>
<a href="#"><h4>Topic 2</h4></a>
<a href="#"><h4>Another Topic</h4></a>
</div>
</div>
</div>
</div><!--/collapse-->
</div>
</div>
To have multiple accordions but only one open at the same time you just need to combine the data-parent
. 要拥有多个手风琴但只有一个同时打开,您只需要组合
data-parent
。 So I have made a codepen for you to see it working. 所以我为你做了一个代码工作,看它是否有效。
I just changed all data-parent
to data-parent="#accordion,#accordion2"
我刚刚将所有
data-parent
改为data-parent="#accordion,#accordion2"
<div class="row">
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default col-md-4">
<div class="panel-heading bites-stings" role="tab" id="headingSeven">
<a role="button" data-toggle="collapse" data-parent="#accordion,#accordion2" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
<h2>Bites and Stings</h2>
</a>
</div>
<div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
<a href="health-resources/mosquitoes.html"><h4>Mosquitoes</h4></a>
<a href="health-resources/ticks.html"><h4>Ticks</h4></a>
<a href="#"><h4>Bees and Wasps</h4></a>
<a href="#"><h4>Animal Bites</h4></a>
</div>
</div>
</div>
<div class="panel panel-default col-md-4">
<div class="panel-heading pet-health" role="tab" id="headingTwo">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion,#accordion2" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
<h2>Pet Health and Safety</h2>
</a>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
<a href="#"><h4>Pet Allergies</h4></a>
<a href="#"><h4>Toxic Plants</h4></a>
<a href="#"><h4>Pet and Wildlife Encounters</h4></a>
</div>
</div>
</div>
<div class="panel panel-default col-md-4">
<div class="panel-heading livestock-health" role="tab" id="headingThree">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion,#accordion2" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
<h2>Livestock Health and Safety</h2>
</a>
</div>
<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="panel-body">
<a href="#"><h4>This is a Topic</h4></a>
<a href="#"><h4>Topic 2</h4></a>
<a href="#"><h4>Another Topic</h4></a>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="panel-group" id="accordion2" role="tablist" aria-multiselectable="true">
<div class="panel panel-default col-md-4">
<div class="panel-heading zoonotic" role="tab" id="headingFour">
<a role="button" data-toggle="collapse" data-parent="#accordion,#accordion2" href="#collapseFour" aria-expanded="true" aria-controls="collapseFour">
<h2>Zoonotic Diseases</h2>
</a>
</div>
<div id="collapseFour" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFour">
<div class="panel-body">
<a href="#"><h4>Bacterial</h4></a>
<a href="#"><h4>Fungal</h4></a>
<a href="#"><h4>Parasitic</h4></a>
<a href="#"><h4>Prionotic</h4></a>
<a href="#"><h4>Rickettsial</h4></a>
<a href="#"><h4>Spirochetes</h4></a>
<a href="#"><h4>Viral</h4></a>
</div>
</div>
</div>
<div class="panel panel-default col-md-4">
<div class="panel-heading allergies" role="tab" id="headingFive">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion,#accordion2" href="#collapseFive" aria-expanded="false" aria-controls="collapseFive">
<h2>Allergies</h2>
</a>
</div>
<div id="collapseFive" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFive">
<div class="panel-body">
<a href="#"><h4>Animal Allergies</h4></a>
<a href="#"><h4>Environmental Allergies</h4></a>
</div>
</div>
</div>
<div class="panel panel-default col-md-4">
<div class="panel-heading environment-health" role="tab" id="headingSix">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion,#accordion2" href="#collapseSix" aria-expanded="false" aria-controls="collapseSix">
<h2>Environmental Health</h2>
</a>
</div>
<div id="collapseSix" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingSix">
<div class="panel-body">
<a href="#"><h4>This is a Topic</h4></a>
<a href="#"><h4>Topic 2</h4></a>
<a href="#"><h4>Another Topic</h4></a>
</div>
</div>
</div>
</div><!--/collapse-->
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.