Отдельно раздел про bootstrap не нашел на форуме (если плохо искал - простите), потому публикую в разделе "элементы интерфейса".
Итак, имеется что-то вроде простенького меню, выполненного с применением bootstrap4 для осуществления collapse/expand, то есть сворачивания и разворачивания разделов. Вот такой вот "аккордеон":
<div class="accordion" id="accordionExample">
<!-- First -->
<div class="block">
<div class="block-header" id="headingOne">
<h5 class="mb-0">
<button class="btn btn-link text-primary px-0 text-uppercase" type="button"
data-toggle="collapse" data-target="#collapseOne" aria-expanded="true"
aria-controls="collapseOne">
First block</button>
</h5>
</div>
<div id="collapseOne" class="collapse " aria-labelledby="headingOne"
data-parent="#accordionExample">
<div class="card-body">
<div class="form-check">
<input type="checkbox" class="form-check-input filter" id="automatic" >
<label class="form-check-label" for="automatic">One</label>
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input filter" id="automatic" >
<label class="form-check-label" for="automatic">Two</label>
</div>
</div>
</div>
</div>
<!-- Second block -->
<div class="block">
<div class="block-header" id="headingTwo">
<h5 class="mb-0">
<button class="btn btn-link text-primary px-0 text-uppercase" type="button"
data-toggle="collapse" data-target="#collapseTwo" aria-expanded="true"
aria-controls="collapseTwo">
Second Block</button>
</h5>
</div>
<div id="collapseTwo" class="collapse " aria-labelledby="headingTwo"
data-parent="#accordionExample">
<div class="card-body">
<div class="form-check">
<input type="checkbox" class="form-check-input" id="automatic2" >
<label class="form-check-label" for="automatic2">One</label>
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="automatic2" >
<label class="form-check-label" for="automatic2">Two</label>
</div>
</div>
</div>
</div>
<!-- Third block -->
<div class="block">
<div class="block-header" id="headingThree">
<h5 class="mb-0">
<button class="btn btn-link text-primary px-0 text-uppercase" type="button"
data-toggle="collapse" data-target="#collapseThree" aria-expanded="true"
aria-controls="collapseThree">
Third block</button>
</h5>
</div>
<div id="collapseThree" class="collapse " aria-labelledby="headingOne"
data-parent="#accordionExample">
<div class="card-body">
<div class="form-check">
<input type="checkbox" class="form-check-input" id="automatic3" >
<label class="form-check-label" for="automatic3">One</label>
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="automatic3" >
<label class="form-check-label" for="automatic3">Two</label>
</div>
</div>
</div>
</div>
</div>
Вот для наглядности ссылка на jsfiddle -
https://jsfiddle.net/hLujosmr/
Сейчас поведение этого меню следующее - при клике по одной из секций эта секция разворачивается, а если при этом до этого клика одна из остальных секций была развернута, она сворачивается. То есть одномоментно может быть развернутой только одна секция. Я решил, что сейчас мне надо несколько другое поведение - не сворачивать ранее открытые секции при очередном клике. То есть должна быть возможность иметь любое кол-во развернутых секций. Что мне необходимо изменить/добавить в коде?
