Bootstrap Аккордеон | Нажмите заголовок 2 div с тем же идентификатором

Question

Я использую bootstrap гармошку. В этом случае вы можете развернуть и свернуть один div в соответствии с их идентификаторами, но в моем сценарии я хочу, чтобы два div расширялись и сворачивались. Оба элемента делятся не в одном и том же столбце, а в другом столбце.

Here is the Example https://codepen.io/nehaj804/pen/rNVMzax `

Когда щелкает заголовок Складная группа № 1, затем Текст панели 1 должен отображаться и скрываться ..

Answer 1

Это то, что вы ищете? Я изменил идентификаторы на классы и использовал только один родительский идентификатор.

.row{
  display:flex;
}
.col-3{
  width:30%;
  display:inline-flex;
}
.col-9{
  width:70%;
  display:inline-flex;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row" id="accordion1">
  <div class="col-3">
    <div class="panel-group" id="accordion1">
      <div class="panel panel-default">
        <div class="panel-heading">
          <h4 class="panel-title">
            <a data-toggle="collapse" data-parent="#accordion1" href=".collapseOne">Collapsible Group Item #1
            </a>
          </h4>
        </div>
        <div id="" class="collapseOne panel-collapse collapse in">
          <div class="panel-body">Panel 1</div>
        </div>
      </div>

      <div class="panel panel-default">
        <div class="panel-heading">
          <h4 class="panel-title">
            <a data-toggle="collapse" data-parent="#accordion1" href=".collapseTwo">Collapsible Group Item #2
            </a>
          </h4>
        </div>
        <div id="" class="collapseTwo panel-collapse collapse">
          <div class="panel-body">
            <div class="panel-body">
              <h2>Heading</h2>
              <div class="panel-group">
                <div class="panel">
                  <a data-toggle="collapse" data-parent="#accordion1" href=".collapseTwoOne">View details 2.1 &raquo;
                  </a>
                  <div id="" class="collapseTwoOne panel-collapse collapse">
                    <div class="panel-body">Details 1</div>
                  </div>
                </div>
                <div class="panel ">
                  <a data-toggle="collapse" data-parent="#accordion1" href=".collapseTwoTwo">View details 2.2 &raquo;
                  </a>
                  <div id="" class="collapseTwoTwo panel-collapse collapse">
                    <div class="panel-body">Details 2</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="panel panel-default">
        <div class="panel-heading">
          <h4 class="panel-title">
            <a data-toggle="collapse" data-parent="#accordion1" href=".collapseThree">Collapsible Group Item #3
            </a>
          </h4>
        </div>
        <div id="" class="collapseThree panel-collapse collapse">
          <div class="panel-body">

            <div class="panel-group" id="accordion1">
              <div class="panel panel-default">
                <div class="panel-heading">
                  <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion1" href=".collapseThreeOne">Collapsible Group Item
                      #3.1
                    </a>
                  </h4>
                </div>
                <div id="" class="collapseThreeOne panel-collapse collapse in">
                  <div class="panel-body">Panel 3.1</div>
                </div>
              </div>
              <div class="panel panel-default">
                <div class="panel-heading">
                  <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion1" href=".collapseThreeTwo">Collapsible Group Item
                      #3.2
                    </a>
                  </h4>
                </div>
                <div id="" class="collapseThreeTwo panel-collapse collapse">
                  <div class="panel-body">Panel 3.2</div>
                </div>
              </div>
            </div>

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

    </div>
  </div>
  <div class="col-9">
    <div id="" class="collapseOne panel-collapse collapse in">
      <div class="panel-body">Panel 1</div>
    </div>
    <div id="" class="collapseTwo panel-collapse collapse">
      <div class="panel-body">
        <div class="panel-body">
          <h2>Heading</h2>
          <div class="panel-group" id="">
            <div class="panel">
              <a data-toggle="collapse" data-parent="#accordion1" href=".collapseTwoOne">View details 2.1 &raquo;
              </a>
              <div id="" class="collapseTwoOne panel-collapse collapse">
                <div class="panel-body">Details 1</div>
              </div>
            </div>
            <div class="panel ">
              <a data-toggle="collapse" data-parent="#accordion1" href=".collapseTwoTwo">View details 2.2 &raquo;
              </a>
              <div id="" class="collapseTwoTwo panel-collapse collapse">
                <div class="panel-body">Details 2</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div>
    </div>