Bootstrap Collapse - Expand All

Question

I\'ve implemented Bootstrap 3 Collapse. The client wants all of the target blocks to expand when any one of the heading links is clicked. I have tried to implement a modifie

Answer 1

I needed to have collapse/expand links to click. Here is my solution:

    <a id="acollapse" href="javascript:jQuery('div .panel-collapse').collapse('hide'); jQuery('#acollapse').hide();jQuery('#aexpand').show();">Collapse All</a>';

    <a id="aexpand" href="javascript:jQuery('div .panel-collapse').collapse('show'); jQuery('#aexpand').hide(); jQuery('#acollapse').show();" style="display: none;">Expand All</a>

Answer 2

Figured it out. when you want to collapse your elements - you need to specify the content div of your #accordion, in your case (and also mine) the class is .collapse.

$('#accordion .collapse').collapse('show');

Answer 3

$("#hideAccordianCards").click(function() { $('.collapse').removeClass('show'); });
$("#showAccordianCards").click(function() { $('.collapse').addClass('show'); });

Answer 4

Try this it will help you.

$('.panel-collapse').removeData('bs.collapse')
    .collapse({parent:false, toggle:false})
    .collapse('show')
    .removeData('bs.collapse')
    .collapse({parent:'#accordion', toggle:false});

Answer 5

I got some help offline on this question. The script to use is

$('#accordion .panel-default').on('click', function () {
    $('#accordion .panel-collapse').collapse('toggle');
});

and this is the JSFiddle example http://jsfiddle.net/gtowle/Vq6gt/1/

Answer 6

$('#accordion .collapse').addClass("in")