JQuery самонастройки многократный коллапс не работает

Question

мне нужно свернуть несколько кнопку и ДИВ с помощью JQuery и самонастройки, как это:

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

Ответ редактироваться в динамических Div & Кнопки

<button id="button" type="button" class="btn btn-primary" data-toggle="collapse" data-start="open" data-target="#demo" data-close-text="Hide" data-open-text="Show"> <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-start="close" data-target="#demo" data-close-text="Hide" data-open-text="Show"> <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> 


// toggle content on click 
$('[data-toggle="collapse"]').click(function() { 
    if ($(this).attr('data-start') == 'open') { 
     $(this).html($(this).attr('data-close-text')); 
    } else { 
     $(this).html($(this).attr('data-open-text')); 
    } 
    $(this).attr('data-start', $(this).attr('data-start') == 'open' ? 'close' : 'open'); 
}); 

// set initial content 
$('[data-toggle="collapse"]').each(function() { 
    if ($(this).attr('data-start') == "open") { 
     $(this).html($(this).attr('data-open-text')); 
    } else { 
     $(this).html($(this).attr('data-close-text')); 
    } 
}); 

Answer 2

Используйте разные идентификаторы в данной-мишени. Например, используйте # demo1 и # demo2 соответственно.

Answer 3

Если вы хотите, чтобы один div был открыт одновременно, вы могли бы легко достичь этого, используя атрибут data-toggle - = "tabs" на кнопках внутри списка с классом «nav». Вы можете узнать об этом в bootstrap JavaScript documentation.