Проблемы с tabs bootstrap как решить?

// Переключение табов
$(function() {
$('ul.tabs_caption').on('click', 'li:not(.active)', function() {
$(this).addClass('active').siblings().removeClass('active').closest('div.tabs').find('div.tabs_content').removeClass('active').eq($(this).index()).addClass('active');
});
});

  
   <div class="tabs">
        <ul class="tabs_caption" data-animated="bounceIn" 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>
            <li>
                <div class="btn_selection"><span>Вариант 4</span></div>
            </li>
        </ul>
      
      <div class="tabs_content active">
            {custom category="1,2,3" template="shortstory" order="title" sort="desc" limit="100"}
        </div>
        <div class="tabs_content">
            {custom category="3" template="shortstory" order="date" sort="asc" limit="100"}
        </div>
        <div class="tabs_content">   
        <div class="tabs">
        <ul class="tabs_caption" data-animated="bounceIn" id="nav_btns">
            <li class="active">
                <div class="btn_selection"><span>Первая</span></div>
            </li>
            <li>
                <div class="btn_selection"><span>Вторая</span></div>
            </li>
        </ul>
        
        <div class="tabs_content active">
            {custom category="1,2" template="shortstory" order="date" sort="asc" limit="100"}
        </div>
        <div class="tabs_content">
            {custom category="1" template="shortstory" order="date" sort="asc" limit="100"}
        </div>
    </div>
        </div>
        <div class="tabs_content">
            {custom category="1" template="shortstory" order="date" sort="asc" limit="100"}
        </div>
    </div>