Expanding and Collapsing a bootstrap accordion

Question

I have unknown number of accordion controls like this on my page that I generate the id for them at run time by looping through my results:

<div class="panel-group" id="accordionMessagesSetup">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordionMessagesSetup" href="#collapseMessagesSetup">
                    <span class="glyphicon glyphicon-chevron-up"></span>
                    Message Setup
                </a>
            </h4>
        </div>
        <div id="collapseMessagesSetup" class="panel-collapse collapse in">
            <div>
                <p style="background-color: red"> Someting ELSE in here</p>
                <p style="background-color: red"> Someting ELSE2 in here</p>
            </div>
        </div>
    </div>
</div>

Live Demo of code above: http://www.bootply.com/jDrg0bMiiV

How can I collapse or expand them all by pressing a button ? ( for example a Collapse All button on the page and an Expand All button on the page.)

Answer 1

In your example, you just have to code two buttons using bootstrap collapse methods:

• .collapse('show')
• .collapse('hide')

---

// SHOW BUTTON:
$("#collapse_show").click(function(e) {
    $(".panel-collapse").collapse("show");
});

// HIDE BUTTON:
$("#collapse_hide").click(function(e) {
   $(".panel-collapse").collapse("hide");
});

Demo

Answer 2

You may use collapse('toggle'):

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

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<button id="toggleAccordions">Collapse / Expand All</button>
<div class="panel-group" id="accordionMessagesSetup">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordionMessagesSetup" href="#collapseMessagesSetup">
                    <span class="glyphicon glyphicon-chevron-up"></span>
                    Message Setup
                </a>
            </h4>
        </div>
        <div id="collapseMessagesSetup" class="panel-collapse collapse in">
            <div>
                <p style="background-color: red"> Someting ELSE in here</p>
                <p style="background-color: red"> Someting ELSE2 in here</p>
            </div>
        </div>
    </div>
</div>
<div class="panel-group" id="accordionMessagesSetup1">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordionMessagesSetup" href="#collapseMessagesSetup">
                    <span class="glyphicon glyphicon-chevron-up"></span>
                    Message Setup
                </a>
            </h4>
        </div>
        <div id="collapseMessagesSetup1" class="panel-collapse collapse in">
            <div>
                <p style="background-color: red"> Someting ELSE in here</p>
                <p style="background-color: red"> Someting ELSE2 in here</p>
            </div>
        </div>
    </div>
</div>
<div class="panel-group" id="accordionMessagesSetup2">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordionMessagesSetup" href="#collapseMessagesSetup">
                    <span class="glyphicon glyphicon-chevron-up"></span>
                    Message Setup
                </a>
            </h4>
        </div>
        <div id="collapseMessagesSetup2" class="panel-collapse collapse in">
            <div>
                <p style="background-color: red"> Someting ELSE in here</p>
                <p style="background-color: red"> Someting ELSE2 in here</p>
            </div>
        </div>
    </div>
</div>

Answer 3

Just make a part of the id static (id="collapsible") and then use a jQuery wildcard.

In your button you can do something like this $("id^=collapsable]").collapse('toggle');

This will match any id beggining with collapsible and toggle it.

Answer 4

I did just that on my current project. Here's how to do it in javascript :

    $("#your_button").click(function(event) 
    {
        // if you use an hyperlink like I do
        event.preventDefault();
        $(this).blur();

        var hideAll = true;
        $(".panel-details").each(function() 
        {
            if (!$(this).hasClass("in")) {
                hideAll = false;
            }
        });
        $(".panel-details").collapse(hideAll ? "hide" : "show");
    });

The panel looks like this :

<div class='panel'>
    <a data-parent='#accordion' data-toggle='collapse' href='#'>
        <div class='panel-heading'>
            <h4 class='panel-title'>
                Panel title
            </h4>
        </div>
    </a>
    <div class="panel-details panel-collapse collapse <?=$firstPanel?'in':''?>">
        <div class='panel-body'>Panel content</div>
    </div>
</div>