javascript - jQuery bootstrap 多重崩溃不起作用

Question

我需要像这样使用 jQuery 和 bootstrap 折叠多个按钮和 div :

HTML:

<button id="button" type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo"> <span class="fa fa-collapse-down"></span> Show</button>
<div id="demo" class="collapse">
    <ol class="list-group">
        <li class="list-group-item">Warrior</li>
        <li class="list-group-item">Adventurer</li>
        <li class="list-group-item">Mage</li>
    </ol>
</div>
<BR><BR><BR>
<button id="button" type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo"> <span class="fa fa-collapse-down"></span> Show</button>
<div id="demo" class="collapse">
    <ol class="list-group">
        <li class="list-group-item">Warrior</li>
        <li class="list-group-item">Adventurer</li>
        <li class="list-group-item">Mage</li>
    </ol>
</div>

JS:

$(function () {
    $('#demo').on('hide.bs.collapse', function () {
        $('#button').html('<span class="fa fa-collapse-down"></span> Show');
    })
    $('#demo').on('show.bs.collapse', function () {
        $('#button').html('<span class="fa fa-collapse-up"></span> Hide');
    })
})

但实际上只有一个按钮和一个 div 起作用。我该如何解决这个问题？!

DEMO

Answer 1

在数据目标中使用不同的 ID。例如分别使用#demo1 和#demo2。