Bootstrap collapse - opening multiple accordions at the same time
I have a moment where my accordions open at the same time - see http://www.bootply.com/Go4t29rYyF
When you press "tab1" all "tab1s" are open, when you press "tab2" all open "tab2s" are great! But I cannot open "tab1s and tab2s" at the same time, it only works when I close one of the tabs before opening the other. The problem is related to my js, but cannot solve it.
$(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', '');
}
});
});
source to share
I cleaned up your code and changed it to use a method toggle
instead of having different flags. The problem is you are sharing the active flag between them. Here's the improved code and 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');
});
});
source to share
You can specify which elements you use in your function using the event parameter
Example:
$('.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', '');
}
});
This is an example. You may need to change this code to make it work in your situation
source to share