Bootstrap коллапса - открытие нескольких аккордеонов одновременно

Question

я попал в точку, где мои аккордеоны открыть в то же время - см http://www.bootply.com/Go4t29rYyF

При нажатии на кнопку «Tab1» все «tab1s» открыт, когда вы нажимаете «tab2», все открытые «tab2s» - отлично! Но я не могу открыть «tab1s & tab2s» в то же время, он работает, только когда я закрываю одну из вкладок перед открытием другого. Проблема связана с моими js, но не могу это исправить.

$(function() { 

     var $active = true; 

     $('.panel-title > a').click(function (e) { 
      e.preventDefault(); 
     }); 

     $('.number1-collapse').on('click', function() { 
      if (!$active) { 
       $active = true; 
       $('.panel-title > a').attr('data-toggle', 'collapse'); 
       $('.number1').collapse('hide'); 
      } else { 
       $active = false; 
       $('.number1').collapse('show'); 
       $('.panel-title > a').attr('data-toggle', ''); 
      } 
     }); 


     $('.number2-collapse').on('click', function() { 
      if (!$active) { 
       $active = true; 
       $('.panel-title > a').attr('data-toggle', 'collapse'); 
       $('.number2').collapse('hide'); 
      } else { 
       $active = false; 
       $('.number2').collapse('show'); 
       $('.panel-title > a').attr('data-toggle', ''); 
      } 
     }); 
    }); 

Answer 1

Я прибиралась код и изменен с помощью метода toggle вместо того, чтобы различные флаги. Проблема в том, что вы разделяете активный флаг между ними. Вот улучшенный код и Bootply:

$(function() { 
    $('.panel-title > a').click(function (e) { 
     e.preventDefault(); 
    }); 

    $('.number1-collapse').on('click', function() { 
     $('.number1').collapse('toggle'); 
    }); 

    $('.number2-collapse').on('click', function() { 
     $('.number2').collapse('toggle'); 
    }); 
}); 

Answer 2

Вы можете указать, какие элементы вы осуществления в функции, используя параметр события

Пример:

$('.number2-collapse').on('click', function (event) { 
     var panelTitle = $(event.currentTarget).find('.panel-title > a'); 
     var number = $(event.currentTarget).find('.number2'); 
     if (!$active) { 
      $active = true; 
      $(panelTitle).attr('data-toggle', 'collapse'); 
      $(number).collapse('hide'); 
     } else { 
      $active = false; 
      $(number).collapse('show'); 
      $(panelTitle).attr('data-toggle', ''); 
     } 
    }); 

Это пример. Вы, возможно, потребуется изменить этот код для того, чтобы работать в вашей ситуации