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

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>