我看了很多关于如何做到这一点的例子，但找不到一个。

我的代码:

null

<!--html-->
<div id="navgroupsframe">
  <div class="panel-group" id="accordion">
    <div class="panel" style="margin-left: -15px;">
      <div class="panel-heading">
        <div class="vgroupholder panel-title" data-parent="#accordion" data-toggle="collapse" href=".titleSpanish" onclick="removevBgs();" style="background-color: transparent;" aria-expanded="true">

          <div class="groupicon">
            <div class="groupicontext">S</div>
          </div>
          <div class="grouptext">
            <div class="grouptitle">Spanish</div>
          </div>

        </div>
      </div>
    </div>
    <div class="panel-collapse titleSpanish collapse in" aria-expanded="true" style="">
      <div class="panel-body">
        <div class="panel-group" id="accordion">
          <div class="vgroupholder panel-body" data-parent="#titleSpanish" data-toggle="collapse" style="background-color: transparent;">

            <div class="groupicon" style="width: 80px;height: 80px;margin-left: 20px;">
              <div class="groupicontext" style="font-size: 40px;">C1</div>
            </div>
            <div class="grouptext">
              <div class="grouptitle">Class 1</div>
            </div>

          </div>
        </div>
      </div>
    </div>
    <div class="panel-collapse titleSpanish collapse in" aria-expanded="true" style="">
      <div class="panel-body">
        <div class="panel-group" id="accordion">
          <div class="vgroupholder panel-body" data-parent="#titleSpanish" data-toggle="collapse" style="background-color: transparent;">

            <div class="groupicon" style="width: 80px;height: 80px;margin-left: 20px;">
              <div class="groupicontext" style="font-size: 40px;">C2</div>
            </div>
            <div class="grouptext">
              <div class="grouptitle">Class 2</div>
            </div>

          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="panel-group" id="accordion">
    <div class="panel" style="margin-left: -15px;">
      <div class="panel-heading">
        <div class="vgroupholder panel-title" data-parent="#accordion" data-toggle="collapse" href=".titlePhysics" onclick="removevBgs();" style="background-color: transparent;">

          <div class="groupicon">
            <div class="groupicontext">P</div>
          </div>
          <div class="grouptext">
            <div class="grouptitle">Physics</div>
          </div>

        </div>
      </div>
    </div>
    <div class="panel-collapse titlePhysics collapse" aria-expanded="false" style="height: 0px;">
      <div class="panel-body">
        <div class="panel-group" id="accordion">
          <div class="vgroupholder panel-body" data-parent="#titlePhysics" data-toggle="collapse" style="background-color: transparent;">

            <div class="groupicon" style="width: 80px;height: 80px;margin-left: 20px;">
              <div class="groupicontext" style="font-size: 40px;">S1</div>
            </div>
            <div class="grouptext">
              <div class="grouptitle">Set 1</div>
            </div>

          </div>
        </div>
      </div>
    </div>
    <div class="panel-collapse titlePhysics collapse" aria-expanded="false" style="height: 0px;">
      <div class="panel-body">
        <div class="panel-group" id="accordion">
          <div class="vgroupholder panel-body" data-parent="#titlePhysics" data-toggle="collapse" style="background-color: transparent;">

            <div class="groupicon" style="width: 80px;height: 80px;margin-left: 20px;">
              <div class="groupicontext" style="font-size: 40px;">S2</div>
            </div>
            <div class="grouptext">
              <div class="grouptitle">Set 2</div>
            </div>

          </div>
        </div>
      </div>
    </div>
  </div>
</div>

null

我试过使用这个:

.panel-group .panel-heading + .panel-collapse > .panel-body {
    border-bottom: none;
}

但不管用。 然而，所有的边界都消失了，除了底部的边界。

我怎么才能解决这个问题？

还

如何添加负Margin-Topps而不导致手风琴跳转？

如有任何帮助，我们将不胜感激！