Как избавиться от автоматического сворачивания всех остальных элементов в bootstrap4?
 

Отдельно раздел про 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/

Сейчас поведение этого меню следующее - при клике по одной из секций эта секция разворачивается, а если при этом до этого клика одна из остальных секций была развернута, она сворачивается. То есть одномоментно может быть развернутой только одна секция. Я решил, что сейчас мне надо несколько другое поведение - не сворачивать ранее открытые секции при очередном клике. То есть должна быть возможность иметь любое кол-во развернутых секций. Что мне необходимо изменить/добавить в коде?

mav1,
убрать id из строки 1 или три указателя стереть на это id

data-parent="#accordionExample"

вариант с убиранием указателей помог, спасибо