2015-02-06 57 views
1

我已經將類別常見問題彙總在一起。我的想法是使用摺疊引導功能顯示每個類別,並進入崩潰查看與問題和答案的手風琴。Bootstrap 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

+0

你的意思就像手風琴一樣?如果是這樣,請參閱[Bootstraps Accordion Docs](http://getbootstrap.com/javascript/#collapse-example-accordion) – Ted 2015-02-06 20:24:53

+0

@Ted我需要做兩欄,你會用手風琴在另一個手風琴裏面有一個手風琴,這對用戶不利。請看bootply – nicogaldo 2015-02-06 20:27:36

+0

的例子啊......錯過了bootply。 – Ted 2015-02-06 20:32:43

回答

4

添加這個腳本:

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

這會隱藏你的其他部分時,scection顯示

看到這個Bootply