Bootstrap Accordion не работает после развертывания всех элементов на 3 панелях в моем приложении?

Question

Когда я нажимаю Expand All, он расширяет все элементы панелей, а затем сворачивает панели, нажимая на каждую панель.Но проблема, когда я хочу расширить панели 1, панель 2 и панель 3.Если панель 2 развернута, то панель 1 и панель 3 должны быть свернуты и т. Д.

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

#Icon .collapse-toggle:after {
  font-family: 'Glyphicons Halflings';
  content: "\e114";
  float: right;
  color: grey;
}

#Icon .collapse-toggle.collapsed:after {
  content: "\e080";
}

    <a id="Expand" href="#">Expand All</a>
  </span>

  <div class="panel-group" id="accordion">
    <div class="panel panel-default">
      <div class="panel-heading" id="Icon">
        <a class="collapse-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#panel1">panel1</a>
      </div>
      <div id="panel1" class="panel-collapse collapse">
        <div class="panel-body"></div>
      </div>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading" id="Icon">
        <a class="collapse-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#panel2">panel2 </a>
      </div>
      <div id="panel2" class="panel-collapse collapse">
        <div class="panel-body"></div>
      </div>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading" id="Icon">
        <a class="collapse-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#panel3">panel3 </a>
      </div>
      <div id="panel3" class="panel-collapse collapse">
        <div class="panel-body"></div>
      </div>
    </div>
  </div>
</div>

Answer 1

Вы можете сделать это с https://codepen.io/creativedev/pen/mKWWYd

var chk = true;
$('#Expand').click(function() {
    $("#accordion .panel-collapse").each(function(i, v) {
        console.log(i);
        console.log(v);
        if ($(this).hasClass("in")) {
            chk = true;
            $(this).collapse('hide');
        } else {
            chk = false;
            $(this).collapse('show');
        }
    })
});

$('#accordion').on('show.bs.collapse', function() {
    if (chk) {
        $('#accordion .in').collapse('hide');
    }
});