Twitter-bootstrap 축소 플러그인-여러 "그룹"을 열려면 어떻게해야합니까?

Twitter-bootstrap 축소 플러그인-여러 "그룹"을 열려면 어떻게해야합니까?

---

축소 플러그인으로 작업 중이며 여러 그룹을 동시에 열 수 있도록하는 방법이 궁금합니다. 데모 페이지에서 :

http://twitter.github.com/bootstrap/javascript.html#collapse

주어진 시간에 하나만 열 수 있습니다. 이것이 아코디언의 예상되는 동작이라고 생각하지만 한 그룹을 열면 다른 그룹이 축소되지 않도록 어떻게 변경할 수 있습니까?

---

data-parent속성을 사용하지 마십시오 .

<div class="accordion" id="accordion2">
  <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" href="#collapseOne">
        Collapsible Group Item #1
      </a>

    </div>
    <div id="collapseOne" class="accordion-body collapse in">
      <div class="accordion-inner">Item 1 Body</div>
    </div>
  </div>
  <div class="accordion-group">
    <div class="accordion-heading"> 
      <a class="accordion-toggle" data-toggle="collapse" href="#collapseTwo">
        Collapsible Group Item #2
      </a>
    </div>
    <div id="collapseTwo" class="accordion-body collapse">
      <div class="accordion-inner">Item 2 Body</div>
    </div>
  </div>
</div>

http://jsfiddle.net/HJf6j/2/

---

각 패널을 종속적으로 확장 / 축소하고 각 페이지에서 여러 아코디언을 허용하는 솔루션입니다.

모든 아코디언과 그룹에 고유 ID가 있으면 페이지에 원하는만큼 아코디언을 가질 수 있습니다.

각 아코디언에는 고유 한 ID가 필요합니다.

<div class="panel-group" id="accordion1" role="tablist" aria-multiselectable="true">

각 제목에는 고유 한 ID가 필요합니다.

<div class="panel-heading" role="tab" id="headingOne">  

각 본문에는 고유 한 ID가 필요하며 해당되는 경우 참조가 사용될 제목

<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">

JSFiddle의 예 : http://jsfiddle.net/qnhd7Lu3/3/

---

$('#multipleOPened').on('click', function() {
  if($(this).is(':checked')) {
    $('#accordion .collapse').removeAttr('data-parent');
  } else {
    $('#accordion .collapse').attr('data-parent','#accordion');
  }
});

JSFiddle에 부트 스트랩 4가있는 예 : https://jsfiddle.net/tw1j7Lf3/7/

참고 URL : https://stackoverflow.com/questions/15696365/twitter-bootstrap-collapse-plugin-how-to-enable-multiple-groups-to-be-opened