Некоторый заполнитель для первой панели аккордеона. Эта панель отображается по умолчанию благодаря классу
.show.Некоторый заполнитель для второй панели аккордеона. По умолчанию эта панель скрыта.
И, наконец, заполнитель для третьей и последней панели аккордеона. По умолчанию эта панель скрыта.
<div id="accordionExample" class="accordion">
<div class="card">
<div id="headingOne" class="card-header">
<h2 class="mb-0"><button type="button" class="btn btn-link btn-block text-left" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> Сворачиваемый групповой элемент #1 </button></h2>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
<div class="card-body">Некоторый заполнитель для первой панели аккордеона. Эта панель отображается по умолчанию благодаря классу <code>.show</code>.</div>
</div>
</div>
<div class="card">
<div id="headingTwo" class="card-header">
<h2 class="mb-0"><button type="button" class="btn btn-link btn-block text-left collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> Сворачиваемый групповой элемент #2 </button></h2>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
<div class="card-body">Некоторый заполнитель для второй панели аккордеона. По умолчанию эта панель скрыта.</div>
</div>
</div>
<div class="card">
<div id="headingThree" class="card-header">
<h2 class="mb-0"><button type="button" class="btn btn-link btn-block text-left collapsed" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> Сворачиваемый групповой элемент #3 </button></h2>
</div>
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
<div class="card-body">И, наконец, заполнитель для третьей и последней панели аккордеона. По умолчанию эта панель скрыта.</div>
</div>
</div>
</div>