탭에서 부트 스트랩 붕괴가 작동하지 않습니다.

Question

탭에서 부트 스트랩 붕괴를 사용하면 작동하지 않는 것 같습니다. 첫 번째 탭에서 제대로 작동하지만 두 번째 탭으로 전환하고 두 번째 축소를 사용하면 즉시 중단됩니다. 예를 들어 http://jsfiddle.net/WENyE/2/을 참조하십시오.

<ul class="nav nav-tabs" id="myTab"> 
    <li class="active"><a href="#home" data-toggle="tab">Home</a></li> 
    <li><a href="#profile" data-toggle="tab">Profile</a></li> 
    <li><a href="#messages" data-toggle="tab">Messages</a></li> 
    <li><a href="#settings" data-toggle="tab">Settings</a></li> 
</ul> 

<div class="tab-content"> 
    <div class="tab-pane active" id="home"> 
    <div class="accordion" id="accordion2"> 
     <div class="accordion-group"> 
     <div class="accordion-heading"> 
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne"> 
      Collapsible Group Item #1 
      </a> 
     </div> 
     <div id="collapseOne" class="accordion-body collapse in"> 
      <div class="accordion-inner"> 
      Anim pariatur cliche... 
      </div> 
     </div> 
     </div> 
     <div class="accordion-group"> 
     <div class="accordion-heading"> 
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo"> 
      Collapsible Group Item #2 
      </a> 
     </div> 
     <div id="collapseTwo" class="accordion-body collapse"> 
      <div class="accordion-inner"> 
      Anim pariatur cliche... 
      </div> 
     </div> 
     </div> 
    </div> 
    </div> 
    <div class="tab-pane" id="profile"> 
    <div class="accordion" id="accordion3"> 
     <div class="accordion-group"> 
     <div class="accordion-heading"> 
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion3" href="#collapseOne"> 
      Collapsible Group Item #1 
      </a> 
     </div> 
     <div id="collapseOne" class="accordion-body collapse in"> 
      <div class="accordion-inner"> 
      Anim pariatur cliche... 
      </div> 
     </div> 
     </div> 
     <div class="accordion-group"> 
     <div class="accordion-heading"> 
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion3" href="#collapseTwo"> 
      Collapsible Group Item #2 
      </a> 
     </div> 
     <div id="collapseTwo" class="accordion-body collapse"> 
      <div class="accordion-inner"> 
      Anim pariatur cliche... 
      </div> 
     </div> 
     </div> 
    </div>  
    </div> 
    <div class="tab-pane" id="messages">...</div> 
    <div class="tab-pane" id="settings">...</div> 
</div> 

Answer 1

접을 때마다 다른 ID를 사용하십시오. 그것은 같은 페이지입니다, 그래서 당신이 첫 번째 접을 수있을 때 작동합니다. 하지만 두 번째 키를 누르면 첫 번째 패널에있는 ID와 동일한 ID를 갖습니다. 어느 것이 표시/숨기기를 선택합니까? 다른 ID로 시도해보십시오.

변화는 제 2 세그먼트 (정보)

<div class="tab-pane" id="profile"> 
    <div class="accordion" id="accordion3"> 
     <div class="accordion-group"> 
     <div class="accordion-heading"> 
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion3" href="#collapseThree"> 
      Collapsible Group Item #1 
      </a> 
     </div> 
     <div id="collapseThree" class="accordion-body collapse in"> 
      <div class="accordion-inner"> 
      Anim pariatur cliche... 
      </div> 
     </div> 
     </div> 
     <div class="accordion-group"> 
     <div class="accordion-heading"> 
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion3" href="#collapseFour"> 
      Collapsible Group Item #2 
      </a> 
     </div> 
     <div id="collapseFour" class="accordion-body collapse"> 
      <div class="accordion-inner"> 
      Anim pariatur cliche... 
      </div> 
     </div> 
     </div> 
    </div>  
    </div> 

는 collapseThree를 확인하고 collapseFour는 HREF 및 id 속성으로 모두 바꿨다.