All geek questions in one place

Bootstrap Accordion Expand / Collapse All do not work as expected

Here the process breaks this:

  • Click "Music Notation"
  • Click Expand / Collapse All
  • Click "Music Notation"
  • Click Expand / Collapse All
  • Click Expand / Collapse All Again

Please note that the musical notation will NOT open, although you should be able to see in the function that the logic says that ALL panels are closed and should open. WHAT FOR? What am I doing wrong?

HTML:

<button class="btn btn-default btn-sm btn-exp" id="expandAllFormats">Expand/Collapse All</button>
<div class="panel-group checkbox-group" id="accordionFormat" role="tablist" aria-multiselectable="true">

<div class="panel panel-default">
<div class="panel-heading" role="tab">
<h4 class="panel-title">
<a id="accordionformatText" role="button" data-toggle="collapse" data-parent="#accordionFormat" href="#formatText">
<i class="fa fa-chevron-circle-right" aria-hidden="true"></i> Text
</a>
</h4>
</div>
<div id="formatText" class="panel-collapse collapse" role="tabpanel">
<div class="panel-body">ALPHA</div>
</div>
</div>

<div class="panel panel-default">
<div class="panel-heading" role="tab">
<h4 class="panel-title">
<a id="accordionformatArt" class="collapsed" role="button" data-toggle="collapse" data-parent="#accordionFormat" href="#formatArt">
<i class="fa fa-chevron-circle-right" aria-hidden="true"></i> Art
</a>
</h4>
</div>
<div id="formatArt" class="panel-collapse collapse" aria-expanded="false" role="tabpanel">
<div class="panel-body">BETA</div>
</div>
</div>

<div class="panel panel-default">
<div class="panel-heading" role="tab">
<h4 class="panel-title">
<a id="accordionformatAudio" class="collapsed" role="button" data-toggle="collapse" data-parent="#accordionFormat" href="#formatAudio">
<i class="fa fa-chevron-circle-right" aria-hidden="true"></i> Audio
</a>
</h4>
</div>
<div id="formatAudio" class="panel-collapse collapse" role="tabpanel">
<div class="panel-body">GAMMA</div>
</div>
</div>

<div class="panel panel-default">
<div class="panel-heading" role="tab">
<h4 class="panel-title">
<a id="accordionformatNotation" class="collapsed" role="button" data-toggle="collapse" data-parent="#accordionFormat" href="#formatNotation">
<i class="fa fa-chevron-circle-right" aria-hidden="true"></i> Music Notation
</a>
</h4>
</div>
<div id="formatNotation" class="panel-collapse collapse" role="tabpanel">
<div class="panel-body">DELTA</div>
</div>
</div>

<div class="panel panel-default">
<div class="panel-heading" role="tab">
<h4 class="panel-title">
<a id="accordionformatVideo" class="collapsed" role="button" data-toggle="collapse" data-parent="#accordionFormat" href="#formatVideo">
<i class="fa fa-chevron-circle-right" aria-hidden="true"></i> Video
</a>
</h4>
</div>
<div id="formatVideo" class="panel-collapse collapse" role="tabpanel">
<div class="panel-body">EPSILON</div>
</div>
</div>

<div class="panel panel-default">
<div class="panel-heading" role="tab">
<h4 class="panel-title">
<a id="accordionformatInteractive" class="collapsed" role="button" data-toggle="collapse" data-parent="#accordionFormat" href="#formatInteractive">
<i class="fa fa-chevron-circle-right" aria-hidden="true"></i> Digital Interactive
</a>
</h4>
</div>
<div id="formatInteractive" class="panel-collapse collapse" role="tabpanel">
<div class="panel-body">ZETA</div>
</div>
</div>
</div>

JS:

var toggleFormat = false;
$('#expandAllFormats').on('click', function(e) {
        e.preventDefault();
        console.log(toggleFormat);
        $("#accordionFormat .panel-collapse").each(function(index, value){
            if (toggleFormat){
                if($(this).hasClass('in')){
                    $(this).collapse('toggle');
                    console.log("This panel is open. it will be closed");
                } else {
                    console.log("This panel is closed. it will stay closed");
                }
            } else {
                if(!$(this).hasClass('in')){
                    $(this).collapse('toggle');
                    console.log("This panel is closed. it will be open");
                } else {
                    console.log("This panel is open. it will stay open");
                }
            }

        });
        toggleFormat = toggleFormat ? false : true;
    });
+4
source share
2 answers

, - , data-parent. / .

/ ( ), Bootstrap Collapse ( ). , .

$('#expandAllFormats').on('click', function () {

   if ($(this).data("lastState") === null || $(this).data("lastState") === 0) {

        // close all
        $('.collapse.in').collapse('hide');

        // next state will be open all
        $(this).data("lastState",1);
        $(this).text("Expand All");

    }
    else {

        // initial state...
        // override accordion behavior and open all
        $('.panel-collapse').removeData('bs.collapse')
        .collapse({parent:false, toggle:false})
        .collapse('show')
        .removeData('bs.collapse')
         // restore single panel behavior
        .collapse({parent:'#accordionFormat', toggle:false});

        // next state will be close all
        $(this).data("lastState",0);
        $(this).text("Collapse All");
    }

});

http://www.codeply.com/go/76Hl6s49rb

OFC, - data-parent= .

+2

data-parent data-parent="#accordionFormat" , , .

? , , , .

var toggleFormat = false;
$('#expandAllFormats').on('click', function (e) {
    e.preventDefault();
    console.log(toggleFormat);
    $("#accordionFormat .panel-collapse").each(function (index, value) {
        if (toggleFormat) {
            if ($(this).hasClass('in')) {
                $(this).collapse('toggle');
                console.log("This panel is open. it will be closed");
            } else {
                console.log("This panel is closed. it will stay closed");
            }
        } else {
            if (!$(this).hasClass('in')) {
                $(this).collapse('toggle');
                console.log("This panel is closed. it will be open");
            } else {
                console.log("This panel is open. it will stay open");
            }
        }

    });
    toggleFormat = toggleFormat ? false : true;
});
<html>
<head>
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>

<body>
<button class="btn btn-default btn-sm btn-exp" id="expandAllFormats">Expand/Collapse All</button>

<div class="panel-group checkbox-group" id="accordionFormat" role="tablist" aria-multiselectable="true">

    <div class="panel panel-default">
        <div class="panel-heading" role="tab">
            <h4 class="panel-title">
                <a id="accordionformatText" role="button" data-toggle="collapse" href="#formatText">
                    <i class="fa fa-chevron-circle-right" aria-hidden="true"></i> Text
                </a>
            </h4>
        </div>

        <div id="formatText" class="panel-collapse collapse" role="tabpanel">
            <div class="panel-body">ALPHA</div>
        </div>
    </div>

    <div class="panel panel-default">
        <div class="panel-heading" role="tab">
            <h4 class="panel-title">
                <a id="accordionformatArt" class="collapsed" role="button" data-toggle="collapse" href="#formatArt">
                    <i class="fa fa-chevron-circle-right" aria-hidden="true"></i> Art
                </a>
            </h4>
        </div>

        <div id="formatArt" class="panel-collapse collapse" aria-expanded="false" role="tabpanel">
            <div class="panel-body">BETA</div>
        </div>
    </div>

    <div class="panel panel-default">
        <div class="panel-heading" role="tab">
            <h4 class="panel-title">
                <a id="accordionformatAudio" class="collapsed" role="button" data-toggle="collapse" href="#formatAudio">
                    <i class="fa fa-chevron-circle-right" aria-hidden="true"></i> Audio
                </a>
            </h4>
        </div>

        <div id="formatAudio" class="panel-collapse collapse" role="tabpanel">
            <div class="panel-body">GAMMA</div>
        </div>
    </div>

    <div class="panel panel-default">
        <div class="panel-heading" role="tab">
            <h4 class="panel-title">
                <a id="accordionformatNotation" class="collapsed" role="button" data-toggle="collapse"
                   href="#formatNotation">
                    <i class="fa fa-chevron-circle-right" aria-hidden="true"></i> Music Notation
                </a>
            </h4>
        </div>

        <div id="formatNotation" class="panel-collapse collapse" role="tabpanel">
            <div class="panel-body">DELTA</div>
        </div>
    </div>

    <div class="panel panel-default">
        <div class="panel-heading" role="tab">
            <h4 class="panel-title">
                <a id="accordionformatVideo" class="collapsed" role="button" data-toggle="collapse" href="#formatVideo">
                    <i class="fa fa-chevron-circle-right" aria-hidden="true"></i> Video
                </a>
            </h4>
        </div>

        <div id="formatVideo" class="panel-collapse collapse" role="tabpanel">
            <div class="panel-body">EPSILON</div>
        </div>
    </div>

    <div class="panel panel-default">
        <div class="panel-heading" role="tab">
            <h4 class="panel-title">
                <a id="accordionformatInteractive" class="collapsed" role="button" data-toggle="collapse"
                   href="#formatInteractive">
                    <i class="fa fa-chevron-circle-right" aria-hidden="true"></i> Digital Interactive
                </a>
            </h4>
        </div>

        <div id="formatInteractive" class="panel-collapse collapse" role="tabpanel">
            <div class="panel-body">ZETA</div>
        </div>
    </div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
0

Source: https://habr.com/ru/post/1671167/

More articles:


All Articles