How to implement expand/collapse all button on page with accordions?
I have a page with a number of accordions. I have been asked to also provide an Expand All/Collapse All button. The problem is that if the user opens and closes a few accordions and then decides to Expand All, those accordions that had previously been opened now become closed. This can be see on my
dev page.
To replicate:
click on accordion 1.00
click on accordion 1.10.00
Click Expand All
Notice that accordion 1.10.00 did not expand
This is my javascript for the Expand/Collapse All button:
// Start Accordian Script for Open/Close All
$(document).on('click', '.expandcollapse', function () {
if ($(this).html() == 'Expand All' || $(this).html() == '<i class=\"glyphicon glyphicon-plus\"></i> Expand All') {
$('.panel-collapse.collapse:not(.in)').each(function (index) {
$(this).collapse('show');
$('#print').show();
$(this).attr('data-toggle', '');
});
$(this).html('<i class=\"glyphicon glyphicon-minus\"></i> Collapse All');
}
else {
$('.panel-collapse.collapse.in').each(function (index) {
$(this).collapse('hide');
$('#print').hide();
$(this).attr('data-toggle', 'collapse');
});
$(this).html('<i class=\"glyphicon glyphicon-plus\"></i> Expand All');
};
});
// End Accordian Script for Open/Close All