Estou tentando criar um acordeão usando o Bootstrap 3 usando o botão recolhível com o atributo de dados, sem a marcação do acordeão. Apenas parece mais limpo para mim.

No entanto, não posso fazerdata-parent atributo para o trabalho. Eu quero ao abrir uma pergunta, todos os outros para fechar. Eu estou lendo os docs (http://getbootstrap.com/javascript/#collapse-usage ), mas ainda não consegue fazê-lo funcionar.

Eu estou usando o seguinte código:

<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>

Aqui está o JSFiddle:http://jsfiddle.net/twinsen/AEew4/

Ficarei muito feliz se alguém me apontar onde estou cometendo um erro: