18

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 modified version of this answer, but can't get it working.

How can I get all target blocks to expand/collapse when any one of them is clicked?

This is the markup:

<div class="panel-group" id="accordion">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h6 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapse{entry_id}">{title}</a></h6>
        </div>
    </div>
    <div id="collapse{entry_id}" class="panel-collapse collapse">
      <div class="panel-body">
        {technology_body}
      </div>
   </div>
</div>

And this is the JS I have attempted:

$('#accordion').on('click', function() {
    if($('.collapse:not(.in)')) {
         $.collapse("toggle");
    }
});
aynber
  • 22,380
  • 8
  • 50
  • 63
pedalGeoff
  • 747
  • 1
  • 8
  • 15

8 Answers8

34

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/

pedalGeoff
  • 747
  • 1
  • 8
  • 15
  • 1
    This toggles the state of collapsible elements. In case, we have expanded elements and I want to expand all, it collapses the expanded one and expands the others. Any ideas to fix that? – jagmohan Oct 12 '14 at 09:57
  • 4
    @jagmohan To fix your problem simply use 'show' or 'hide' instead of 'toggle' as arguments of the collapse() function as described in the [docs](http://getbootstrap.com/javascript/#collapse). – Philipp Zedler Oct 28 '14 at 20:34
  • Thanks Philipp. I was able to figure that out. – jagmohan Oct 29 '14 at 04:27
  • This answer combined with Phillipp's comment helped me figure out my solution. Thank you! – juliet Feb 19 '15 at 20:16
  • How to handle in typescript for angular – Yasar Arafath Jul 17 '17 at 10:50
25

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');
Maor Ben
  • 309
  • 4
  • 13
9

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>
Adam Parker
  • 136
  • 1
  • 3
3
$("#hideAccordianCards").click(function() { $('.collapse').removeClass('show'); });
$("#showAccordianCards").click(function() { $('.collapse').addClass('show'); });
lczapski
  • 4,026
  • 3
  • 16
  • 32
Ravster
  • 41
  • 1
  • 1
    Code-only answers are generally frowned upon on this site. Could you please edit your answer to include some comments or explanation of your code? Explanations should answer questions like: What does it do? How does it do it? Where does it go? How does it solve OP's problem? See: [How to anwser](https://stackoverflow.com/help/how-to-answer). Thanks! – Eduardo Baitello Nov 05 '19 at 03:02
1

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});
DCM
  • 33
  • 7
0

We have a way to solve this.

<div class="AccordionStyle panel-group" id="Security_accordion">
<div class="ShowAllTabs"><a>SHOW ALL <i class="fa fa-chevron-down"></i></a></div>
    <!--= collapse-start =-->
    <div class="panel">
        <div class="panel-heading">
        <div href="#SecurityServices" data-toggle="collapse" data-parent="#Security_accordion" class="panel-title expand collapsed">
            <div class="right-arrow pull-right icon_wrap"><i class="fa fa-chevron-down"></i></div>
            <a>Security Services</a>
        </div>
        </div>

        <div id="SecurityServices" class="panel-collapse collapse">
        <div class="panel-body">
            contents will go here...
        </div>
        </div>
    </div>
    <!--= END! =-->

</div>

<script>
$('.panel-group .ShowAllTabs').click(function(){
    $(this).toggleClass('show_all_panels');

    if($(this).hasClass('show_all_panels'))
    {
        $(this).closest('.panel-group').find('.panel-title').removeClass('collapsed').prop('aria-expanded',"true").attr('aria-expanded',"true");
        $(this).closest('.panel-group').find('.panel-collapse').addClass('in').prop('aria-expanded',"true").attr('aria-expanded',"true").css("height","auto");
    }else
    {
        $(this).closest('.panel-group').find('.panel-title').addClass('collapsed').prop('aria-expanded',"false").attr('aria-expanded',"false");
        $(this).closest('.panel-group').find('.panel-collapse').removeClass('in').prop('aria-expanded',"false").attr('aria-expanded',"false");
    }
    setTimeout(function(){$( window ).resize();},200);
});
</script>
Ali Sufyan
  • 75
  • 1
  • 8
0
$('#accordion .collapse').addClass("in")
Manuel
  • 2,334
  • 4
  • 20
  • 36
0

I'm using Bootstrap 4 and found that using $('#accordion .collapse').collapse('show') did not work to "expand all", it would only affect one section.

However the following commands do work for me, and expand / hide all the sections all at once.

$('#accordion .collapse').each( function() { $(this).addClass( "show" ) } )
$('#accordion .collapse').each( function() { $(this).removeClass( "show" ) } )
dogatonic
  • 2,658
  • 1
  • 23
  • 14