my primer

Bootstrap navs

HTML

<div class="tabs">
	<ul class="tabs_caption" id="nav_btns">
	<li class="active"><div class="btn_selection"><span>Категория 1</span></div></li>
	<li><div class="btn_selection"><span>Категория 2</span></div></li>
	<li><div class="btn_selection"><span>Категория 3</span></div></li>
	</ul>        
<div class="tabs_content active">
<h1>Популярные</h1>
<div class="tabs">
	<ul class="tabs_caption" data-animated="bounceIn" id="nav_btns">
	<li class="active"><div class="btn_selection"><span>доп. категория 1-1</span></div></li>
	<li><div class="btn_selection"><span>доп. категория 1-2</span></div></li>
	<li><div class="btn_selection"><span>доп. категория 1-3</span></div></li>
	</ul>       
<div class="tabs_content active">
{custom category="1" template="shortstory" order="title" sort="desc" cache="yes" from="12"}          
</div>
<div class="tabs_content">
{custom category="2" template="shortstory" order="date" sort="asc" cache="yes" limit="15"}
</div>
<div class="tabs_content">
{custom category="3" template="shortstory" order="date" sort="asc" cache="yes" limit="15"}
</div>               
</div>                  
</div>
<div class="tabs_content">
{custom category="4" template="shortstory" order="date" sort="asc" cache="yes" limit="15"}
</div>
<div class="tabs_content">
<h1>Популярные</h1>    
<div class="tabs">
	<ul class="tabs_caption" id="nav_btns">
	<li class="active"><div class="btn_selection"><span>доп. категория 3-1</span></div></li>
	<li><div class="btn_selection"><span>доп. категория 3-2</span></div></li>
	<li><div class="btn_selection"><span>доп. категория 3-3</span></div></li>
	<li><div class="btn_selection"><span>доп. категория 3-4</span></div></li>
	<li><div class="btn_selection"><span>доп. категория 3-5</span></div></li>
	</ul>
<div class="tabs_content active">
{custom category="6" template="shortstory_macros" order="date" sort="asc" cache="yes" limit="15"}
</div>
<div class="tabs_content">
{custom category="7" template="shortstory_macros" order="date"...

CSS

#nav_btns {margin: 0 0 15px;}
    #nav_btns li {width: auto; margin: 0 5px 10px;}
    .active > .btn_selection {background: #fff; color: black;}
    .btn_selection {
    border: 4px solid #2D2D2D;
    background: #2D2D2D;
    border-radius: 40px;
    color: #fff;
    padding: 0px 55px 0px;
    -webkit-transition: 300ms;
    transition: 300ms;
    text-align: center;    
    cursor: pointer;
    height: 30px;
    vertical-align: middle;
    position: relative;
    }    
    .btn_selection > span {font-size: 15px; font-weight: 600; top: 3px; position: relative; margin: 0 20px;}
    .btn_selection:hover {background: #fff; color: black;}    
    .tabs_content {     
    transition: opacity 0.5s ease-out;
    opacity: 0; 
    height: 0;
    overflow: hidden;
    }
	.tabs_content.active {opacity: 1;height: auto;}

JavaScript

$(function() {
$('ul.tabs_caption').on('click', 'li:not(.active)', function() {
$(this).addClass('active').siblings().removeClass('active').closest('div.tabs').children('div.tabs_content').removeClass('active').eq($(this).index()).addClass('active');
});
});