Я пытаюсь создать аккордеон, используя Bootstrap 3, используя кнопку, складываемую с атрибутом data, без разметки аккордеона. Это выглядит мне чище.

Однако я не могу сделатьДанные родитель атрибут для работы. Я хочу при открытии вопроса все остальные закрыть. Я читаю документы (http://getbootstrap.com/javascript/#collapse-usage ) но до сих пор не могу заставить его работать.

Я использую следующий код:

<div class="accordion" id="myAccordion">
    <button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#collapsible-1" data-parent="#myAccordion">Question 1?</button>
    <div id="collapsible-1" class="collapse">
    <p>Etiam posuere quam ac quam. Maecenas aliquet accumsan leo. Nullam dapibus fermentum ipsum. Etiam quis quam. Integer lacinia. Nulla est.</p>
    </div>
    <button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#collapsible-2" data-parent="#myAccordion">Question 2?</button>
    <div id="collapsible-2" class="collapse">
    <p>Etiam posuere quam ac quam. Maecenas aliquet accumsan leo. Nullam dapibus fermentum ipsum. Etiam quis quam. Integer lacinia. Nulla est.</p>
    </div>
    <button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#collapsible-3" data-parent="#myAccordion">Question 3?</button>
    <div id="collapsible-3" class="collapse">
    <p>Etiam posuere quam ac quam. Maecenas aliquet accumsan leo. Nullam dapibus fermentum ipsum. Etiam quis quam. Integer lacinia. Nulla est.</p>
    </div>
</div>

Вот JSFiddle:http://jsfiddle.net/twinsen/AEew4/

Я буду очень рад, если кто-то укажет мне, где я совершаю ошибку: \ Bootstrap 4