부트 스트랩 3 다른 섹션에서 한 번에 축소

나는 카테고리와 함께 FAQ를 작성했습니다. 내 생각은 Collapse 부트 스트랩을 사용하여 각 카테고리를 표시하고 붕괴에 대한 질문과 대답이있는 아코디언을 참조하는 것입니다.부트 스트랩 3 다른 섹션에서 한 번에 축소

왼쪽에는 두 개의 열로 구성되어 카테고리와 올바른 질의 응답을 선택합니다.

이전 닫기를 두 번째 범주 (축소)로 선택해야합니다.

내가 여기에 위로 만들 수 있습니다.

<div class="container"> 
    <section id="tratamientos" class="row"> 
    <h1>Tratamientos</h1> 
    <div class="col-sm-2"> 
     <button class="btn btn-default" type="button" data-toggle="collapse" data-target="#cirugiaoral" aria-expanded="false" aria-controls="cirugiaoral">Cirugía Oral</button> 
     <br><br> 
     <button class="btn btn-default" type="button" data-toggle="collapse" data-target="#blanqueamiento" aria-expanded="false" aria-controls="blanqueamiento">Blanqueamiento</button> 
    </div> 

    <div class="col-sm-10"> 

     <div class="collapse" id="cirugiaoral"> 
     <h3>Cirugía Oral</h3> 
     /* FAQ with accordion */ 
     <ul> 
      <li>item with accordion</li> 
      <li>item with accordion</li> 
     </ul> 
     </div> 

     <div class="collapse" id="blanqueamiento"> 
     <h3>Blanqueamiento</h3> 
     /* FAQ with accordion */ 
     <ul> 
      <li>item with accordion</li> 
      <li>item with accordion</li> 
     </ul> 
     </div> 
    </div> 
    </section> 
</div>

Bootply here

출처

2015-02-06 nicogaldo

당신은 의미합니까 참조

을 표시 될 때 당신을위한 다른 섹션을 숨길 수 있습니다 그 아코디언처럼? 그렇다면 [부트 스트랩 아코디언 문서] (http://getbootstrap.com/javascript/#collapse-example-accordion) – Ted

@Ted를 두 열로 처리해야합니다. 아코디언을 사용하려면 다른 아코디언 안에 아코디언을 사용하고 그것은 사용자에게 좋지 않습니다. bootply의 예를 보시기 바랍니다 – nicogaldo

아 ... bootply를 놓쳤습니다. – Ted

이 스크립트를 추가

$('.collapse').on('show.bs.collapse', function (e) { 
    $('.collapse').not(e.target).removeClass('in'); 
});

scection이 Bootply

출처

2015-02-06 21:04:03 Ted

부트 스트랩 3 다른 섹션에서 한 번에 축소

답변

관련 문제