多个Collapsible divs bootstrap

Question

我正在Bootstrap 3.3.6中创建一个包含相册的图库。这些专辑包含一个专辑封面，可以在可折叠的<div>内显示或隐藏专辑图片。可折叠的<div>也是手风琴式的。

我使用媒体查询和Bootstrap的.hidden- *类有2种移动和桌面布局。此外，当您单击相册中的一个图片时，它会打开一个轮播以滚动图像。

代码完美无缺，但我希望可折叠的<div>保持打开状态，尽管随着页面调整大小，布局会发生变化。现在它会在点击时打开，然后当您将屏幕调整到断点之后，当布局随断点更改时，它会关闭。

我意识到这有点不必要，因为基本上没有人会在桌面上以这种方式调整浏览器的大小，但我仍然想知道如何做到这一点。无法解决这个问题。

以下是代码示例，您可以看到布局如何从桌面更改为移动。

请点击此处查看www.leubasketball.com/gallery

 <div class="panel-group text-center" id="accordion" role="tablist" aria-multiselectable="true">
    <div class="panel panel-default">
        <div class="col-sm-12 col-md-12 hidden-xs">
<!--Desktop Gallery------------------------------>

<!--Album Covers--------------------------------->
    <!--Skillcase 2016 Album Cover----------------------->
        <div class="col-sm-3 panel-heading" role="tab" id="skillcase2016">
              <div class="panel-title">
                <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseSkillcase2016" aria-expanded="true" aria-controls="collapseSkillcase2016">
                  <h4 style="color:#ffffff">Skillcase 2016</h4>
                    <img src="img/completeplayerimage.jpg" class="albumCover img-responsive">
                </a>
              </div>
        </div>
    <!--St Goerge 2016 Album Cover----------------------->
       <div class="col-sm-3 panel-heading" role="tab" id="stgeorge2016">
          <div class="panel-title">
            <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseStgeorge2016" aria-expanded="false" aria-controls="collapseStgeorge2016">
              <h4 style="color:#ffffff">St. George 2016</h4>
                <img src="img/completeplayerimage.jpg" class="albumCover img-responsive">
            </a>
          </div>
        </div>
        </div>

<!--Albums-------------------------------------------->           
    <!--Skillcase 2016 Album--------------------------->         
        <div id="collapseSkillcase2016" class="panel-collapse collapse" role="tabpanel" aria-labelledby="skillcase2016">
          <div class="panel-body">
            <!--Thumbnails-------->
                <div class="col-sm-12 col-md-12 hidden-xs">
         <!--Carousel Modal here-------------------------------------->
                </div>
          </div>
        </div>
    <!--Skillcase 2016 Album--------------------------->         
        <div id="collapseStgeorge2016" class="panel-collapse collapse" role="tabpanel" aria-labelledby="stgeorge2016">
          <div class="panel-body">
            <!--Thumbnails-------->
                <div class="col-sm-12 col-md-12 hidden-xs">
         <!--Carousel Modal here-------------------------------------->
                </div>
          </div>
        </div>

<!--Mobile Gallery---------------------------------------->

    <!--Mobile Album Covers-------------------------------->            
        <!--Skillcase 2016 Album Cover---------------------->
       <div class="col-xs-6 visible-xs panel-heading" role="tab" id="skillcase2016M">
            <h4 class="panel-title">
                <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseSkillcase2016M" aria-expanded="false" aria-controls="collapseSkillcase2016M, collapseSkillcase2016">
                  <h4 style="color:#ffffff">Skillcase 2016</h4>
                    <img src="img/completeplayerimage.jpg" class="albumCover img-responsive">
                </a>
            </h4>
        </div>
        <!--St. George 2016 Album Cover------------------->       
       <div class="col-xs-6 visible-xs panel-heading" role="tab" id="stgeorge2016M">
            <h4 class="panel-title">
                <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseStgeorge2016M" aria-expanded="false" aria-controls="collapseStgeorge2016M">
                  <h4 style="color:#ffffff">St. George 2016</h4>
                    <img src="img/completeplayerimage.jpg" class="albumCover img-responsive">
                </a>
            </h4>
        </div>
<!--Mobile Albums--------------------------------------->
        <!--Skillcase 2016 Album---------------------------->
        <div id="collapseSkillcase2016M" class="panel-collapse collapse" role="tabpanel" aria-labelledby="skillcase2016M">
          <div class="panel-body">
              <div class="col-xs-12 hidden-sm hidden-md hidden-lg">
          <!--Carousel Modal here------------------------->
              </div>
          </div>
        </div>
        <!--St George 2016 Album---------------------------->
        <div id="collapseStgeorge2016M" class="panel-collapse collapse" role="tabpanel" aria-labelledby="stgeorge2016M">
          <div class="panel-body">
              <div class="col-xs-12 hidden-sm hidden-md hidden-lg">
          <!--Carousel Modal here------------------------->
              </div>
          </div>
        </div>



    </div>
</div>