Bootstrap - коллапс карта открывается, затем сразу закрывается снова

Question

Я читал предыдущие темы, которые освещают эту проблему для панелей навигации и меню, но, похоже, это не применимо.У меня очень простой пример: две карты, одна открылась по умолчанию, другая рухнула.Когда я пытаюсь развернуть вторую карточку, нажав кнопку Card 2, она открывается, но затем снова сразу закрывается.Я не уверен, что делаю не так.

Заранее благодарен за любую помощь.

Пример здесь:

<div id="accordion">
    <div class="card">
        <div class="card-header" id="header1">
            <h5 class="mb-0">
                <button class="btn btn-link" data-toggle="collapse" data-target="#collapse1" aria-expanded="true" aria-controls="collapse1">
                    Card 1 Button
                </button>
            </h5>
        </div>
        <div id="collapse1" class="collapse show" aria-labelledby="header1" data-parent="#accordion">
            <div class="card-body">
                Card 1 Content
            </div>
        </div>
    </div>
    <div class="card">
        <div class="card-header" id="header2">
            <h5 class="mb-0">
                <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapse2" aria-expanded="false" aria-controls="collapse2">
                    Card 2 Button
                </button>
            </h5>
        </div>
        <div id="collapse2" class="collapse" aria-labelledby="header2" data-parent="#accordion">
            <div class="card-body">
                Card 2 Content
            </div>
        </div>
    </div>
</div>

Answer 1

Вы уверены, что используете Bootstrap 4?

В начальной загрузке 3 он работает следующим образом:

Вам нужно использовать класс in вместо show, чтобы он открывался по умолчанию при загрузке страницы.

<div id="collapse1" class="collapse in" aria-labelledby="header1" data-parent="#accordion">
            <div class="card-body">
                Card 1 Content
            </div>
        </div>

jsFiddle https://jsfiddle.net/0uk0xuvd/

Проверьте версию начальной загрузки, которую вы импортируете.