我正在尝试在我的WordPress网站的页面上创建一个Bootstrap(v4a)手风琴。
手风琴如下:
<div id="accordion" role="tablist" aria-multiselectable="true">
<div class="card">
<div class="card-header" role="tab" id="headingOne">
<h5 class="mb-0">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Save money on your annual electricity bills
</a>
</h5>
</div>
<div id="collapseOne" class="collapse show" role="tabpanel" aria-labelledby="headingOne">
<div class="card-block">
Save up to 90% on electricity bills for lighting – LED lights can save the average home or business a lot of money on annual costs.
</div>
</div>
</div>
<div class="card">
<div class="card-header" role="tab" id="headingTwo">
<h5 class="mb-0">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Replace light far less often than other lighting types
</a>
</h5>
</div>
<div id="collapseTwo" class="collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="card-block">
With lifetimes of over 50,000 hours, LED lights last up to 10 times longer than traditional lights – maintenance costs are dramatically reduced and no flickering lights!
</div>
</div>
</div>
<div class="card">
<div class="card-header" role="tab" id="headingThree">
<h5 class="mb-0">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Select from a range of options to set the lighting mood
</a>
</h5>
</div>
<div id="collapseThree" class="collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="card-block">
LED lights have been proven to improve concentration levels in working environments.
</div>
</div>
</div>
</div>
我有两个问题:
答案 0 :(得分:1)
在第一个面板中,删除“show”类以确保所有元素都已关闭:
<div id="collapseOne" class="collapse" role="tabpanel" aria-labelledby="headingOne">