Задача: Построить закладки tabs
или таблетки pills
с эффектом сворачивания и разворачивания как у аккордеона. При этом обойтись штатными средствами бутстрапа, не дописывая свои скрипты и не добавляя чужие.
Решил в три этапа. Код в конце ответа показывает результаты всех трёх этапов.
1) Будем строить таблетки, потому что они ярче :) Начинаем строить не от таблеток к аккордеону, а от аккордеона к таблеткам. Берём из описания бутстрапа пример с аккордеоном и переставляем фрагменты кода, чтобы из трёх панелей получилось две. В верхнюю собираем все три заголовка, а в нижнюю - тексты к ним.
2) Скрещиваем заголовки
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Collapsible Group Item #2
</a>
</h4>
</div>
с таблетками из другого примера бутстрапа
<li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
и получаем
<li role="presentation" id="headingTwo">
<a class="collapsed" role="tab" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Collapsible Group Item #2
</a>
</li>
3) Чтобы активная таблетка выделялась синим, нужно пристроить class="active"
и data-toggle="tab"
. Первый атрибут относился к пункту списка <li>
, а второй - к ссылке внутри этого пункта. Но у ссылки уже есть data-toggle="collapse"
. Поэтому оба оставшихся атрибута назначаем пункту списка.
Результат
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<style>
h3 { margin-top: 0.2em; }
.row { margin-top: 2em; }
</style>
<div class="container">
<div class="row">
<div class="col-xs-1"><h3>1)</h3></div>
<div class="col-xs-11">
<div class="panel-group" id="accordion1" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne1">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion1" href="#collapseOne1" aria-expanded="true" aria-controls="collapseOne1">
Item #1
</a>
</h4>
</div>
<div class="panel-heading" role="tab" id="headingTwo1">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion1" href="#collapseTwo1" aria-expanded="false" aria-controls="collapseTwo1">
Item #2
</a>
</h4>
</div>
<div class="panel-heading" role="tab" id="headingThree1">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion1" href="#collapseThree1" aria-expanded="false" aria-controls="collapseThree1">
Item #3
</a>
</h4>
</div>
</div>
<div class="panel panel-default">
<div id="collapseOne1" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne1">
<div class="panel-body">
<p>Anim pariatur cliche reprehenderit...</p>
</div>
</div>
<div id="collapseTwo1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo1">
<div class="panel-body">
<p>Anim pariatur cliche reprehenderit...</p>
<p>Anim pariatur cliche reprehenderit...</p>
</div>
</div>
<div id="collapseThree1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree1">
<div class="panel-body">
<p>Anim pariatur cliche reprehenderit...</p>
<p>Anim pariatur cliche reprehenderit...</p>
<p>Anim pariatur cliche reprehenderit...</p>
</div>
</div>
</div>
</div>
</div>
</div><!--row-->
<div class="row">
<div class="col-xs-1"><h3>2)</h3></div>
<div class="col-xs-11">
<ul class="nav nav-pills" role="tablist">
<li role="presentation" id="headingOne2">
<a role="tab" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne2" aria-expanded="true" aria-controls="collapseOne2">
Item #1
</a>
</li>
<li role="presentation" id="headingTwo2">
<a class="collapsed" role="tab" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo2" aria-expanded="false" aria-controls="collapseTwo2">
Item #2
</a>
</li>
<li role="presentation" id="headingThree2">
<a class="collapsed" role="tab" data-toggle="collapse" data-parent="#accordion2" href="#collapseThree2" aria-expanded="false" aria-controls="collapseThree2">
Item #3
</a>
</li>
</ul>
<div class="panel-group" id="accordion2" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div id="collapseOne2" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne2">
<div class="panel-body">
<p>Anim pariatur cliche reprehenderit...</p>
</div>
</div>
<div id="collapseTwo2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo2">
<div class="panel-body">
<p>Anim pariatur cliche reprehenderit...</p>
<p>Anim pariatur cliche reprehenderit...</p>
</div>
</div>
<div id="collapseThree2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree2">
<div class="panel-body">
<p>Anim pariatur cliche reprehenderit...</p>
<p>Anim pariatur cliche reprehenderit...</p>
<p>Anim pariatur cliche reprehenderit...</p>
</div>
</div>
</div>
</div>
</div>
</div><!--row-->
<div class="row">
<div class="col-xs-1"><h3>3)</h3></div>
<div class="col-xs-11">
<ul class="nav nav-pills" role="tablist">
<li role="presentation" data-toggle="tab" class="active" id="headingOne3">
<a role="tab" data-toggle="collapse" data-parent="#accordion3" href="#collapseOne3" aria-expanded="true" aria-controls="collapseOne3">
Item #1
</a>
</li>
<li role="presentation" data-toggle="tab" id="headingTwo">
<a class="collapsed" role="tab" data-toggle="collapse" data-parent="#accordion3" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Item #2
</a>
</li>
<li role="presentation" data-toggle="tab" id="headingThree">
<a class="collapsed" role="tab" data-toggle="collapse" data-parent="#accordion3" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Item #3
</a>
</li>
</ul>
<div class="panel-group" id="accordion3" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div id="collapseOne3" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne3">
<div class="panel-body">
<p>Anim pariatur cliche reprehenderit...</p>
</div>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
<p>Anim pariatur cliche reprehenderit...</p>
<p>Anim pariatur cliche reprehenderit...</p>
</div>
</div>
<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="panel-body">
<p>Anim pariatur cliche reprehenderit...</p>
<p>Anim pariatur cliche reprehenderit...</p>
<p>Anim pariatur cliche reprehenderit...</p>
</div>
</div>
</div>
</div>
</div>
</div><!--row-->
</div><!--container-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
Можно посмотреть живьём и в песочнице.