Bootstrap аккордеон - Не закрывайте другой аккордеон, если пользователь не щелкнет, чтобы закрыть

Question

Используется ниже bootstrap пример аккордеона. функциональность аккордеона работает отлично.

Когда пользователь раскрывает первый аккордеон и нажимает второй аккордеон. Первый баян не должен закрываться. Но он закрывает первый аккордеон, когда пользователь нажимает второй аккордеон.

Развернуть / свернуть гармошку нужно вручную открывать / закрывать.

Не уверен, нужно ли обновить JS или CSS, чтобы решить эту проблему. Пожалуйста, помогите мне найти решение.

Спасибо

$('.collapse.show').each(function(){
      $(this).prev('.card-header').find('.fa').addClass('fa-minus').removeClass('fa-plus');
    });
    
    // Toggle plus minus icon on show hide of collapse element
    $('.collapse').on('show.bs.collapse', function(){
      $(this).prev('.card-header').find('.fa').removeClass('fa-plus').addClass('fa-minus');
    }).on('hide.bs.collapse', function(){
      $(this).prev('.card-header').find('.fa').removeClass('fa-minus').addClass('fa-plus');
    });

<div class="accordion" id="accordionExample">
    <div class="card">
        <div class="card-header" id="headingOne">
            <h2 class="mb-0"><button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne"><i class="fa fa-plus"></i> What is HTML?</button></h2>
        </div>
        <div class="collapse" id="collapseOne" aria-labelledby="headingOne" data-parent="#accordionExample">
            <div class="card-body">
                <p>HTML stands for HyperText Markup Language. HTML is the standard markup language for describing the structure of web pages. <a href="https://www.tutorialrepublic.com/html-tutorial/" target="_blank">Learn more.</a></p>
            </div>
        </div>
    </div>
    <div class="card">
        <div class="card-header" id="headingTwo">
            <h2 class="mb-0"><button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseTwo"><i class="fa fa-plus"></i> What is Bootstrap?</button></h2>
        </div>
        <div class="collapse" id="collapseTwo" aria-labelledby="headingTwo" data-parent="#accordionExample">
            <div class="card-body">
                <p>Bootstrap is a sleek, intuitive, and powerful front-end framework for faster and easier web development. It is a collection of CSS and HTML conventions. <a href="https://www.tutorialrepublic.com/html-tutorial/" target="_blank">Learn more.</a></p>
            </div>
        </div>
    </div>
</div>

Answer 1

Чтобы предотвратить закрытие первых аккордеонов при нажатии на вторые, вам нужно только удалить атрибут data-parent в части HTML фрагмента кода.

<div class="accordion" id="accordionExample">
    <div class="card">
        <div class="card-header" id="headingOne">
            <h2 class="mb-0"><button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne"><i class="fa fa-plus"></i> What is HTML?</button></h2>
        </div>
        <div class="collapse" id="collapseOne" aria-labelledby="headingOne">
            <div class="card-body">
                <p>HTML stands for HyperText Markup Language. HTML is the standard markup language for describing the structure of web pages. <a href="https://www.tutorialrepublic.com/html-tutorial/" target="_blank">Learn more.</a></p>
            </div>
        </div>
    </div>
    <div class="card">
        <div class="card-header" id="headingTwo">
            <h2 class="mb-0"><button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseTwo"><i class="fa fa-plus"></i> What is Bootstrap?</button></h2>
        </div>
        <div class="collapse" id="collapseTwo" aria-labelledby="headingTwo">
            <div class="card-body">
                <p>Bootstrap is a sleek, intuitive, and powerful front-end framework for faster and easier web development. It is a collection of CSS and HTML conventions. <a href="https://www.tutorialrepublic.com/html-tutorial/" target="_blank">Learn more.</a></p>
            </div>
        </div>
    </div>
</div>