bootstrap tab collapse/expand

Question

Я хочу создать вкладку в бутстрапе со складными вкладками и стрелками вверх/вниз.

<ul class="nav nav-tabs"> 
    <li><a data-toggle="tab" href="#tab1">tab 1</a></li> 
    <li><a data-toggle="tab" href="#tab2">tab 2</a></li> 
</ul> 
<div class="tab-content"> 
    <div id="tab1" class="tab-pane fade in active"> 
    <p>Tab 1 content.</p> 
    </div> 
    <div id="tab2" class="tab-pane fade"> 
    <p>Tab 2 content.</p> 
    </div> 
</div> 

UPDATE Я хочу Вкладки быть toggable так вкладка расширяется или разрушается, когда я нажимаю его снова.

Спасибо

Answer 1

Создать свой HTML, как это,

<ul class="nav nav-tabs"> 
    <li><a data-toggle="tab" href="#tab1">tab 1 
      <span class="glyphicon glyphicon-menu-down"></span> 
      <span class="glyphicon glyphicon-menu-up"></span></a> 
    </li> 
    <li><a data-toggle="tab" href="#tab2">tab 2 
      <span class="glyphicon glyphicon-menu-down"></span> 
      <span class="glyphicon glyphicon-menu-up"></span></a> 
    </li> 
</ul> 
<div class="tab-content"> 
    <div id="tab1" class="tab-pane fade in active"> 
    <p>Tab 1 content.</p> 
    </div> 
    <div id="tab2" class="tab-pane fade"> 
    <p>Tab 2 content.</p> 
    </div> 
</div> 

А затем CSS, как это,

.nav-tabs>li>a>.glyphicon.glyphicon-menu-down{display:block;} 
.nav-tabs>li>a>.glyphicon.glyphicon-menu-up{display:none;} 
.nav-tabs>li.active>a>.glyphicon.glyphicon-menu-down{display:none;} 
.nav-tabs>li.active>a>.glyphicon.glyphicon-menu-up{display:block;} 

Это может работать, как вы хотели. Но вам, возможно, придется стилизовать его в соответствии с вашими потребностями.

Вот рабочий пример я сделал - http://www.bootply.com/2cSkBhK32r