CODEWITHSUNDEEP
htmlbootstrap-4
Lucas Martini
Lucas Martini

Reputation: 183

Collapse inside another collapse

I tried to create a collapse area inside another collapse.

When I click to open the first collapse, it works perfect. When I try to open the second one (that is inside the first one) it closes the first one instead to open the last collapse. 

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>

<div id="accordion">
  <div class="card">
    <div class="card-header" id="heading0">
      <h3 class="mb-0">
        <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapse0" aria-expanded="false" aria-controls="collapse0">textMain</button>
      </h3>
    </div>
    <div id="collapse0" class="collapse" aria-labelledby="heading0" data-parent="#accordion" style="">
      <div class="card-body">
        <div class="card">
          <div class="card-header" id="heading0_1">
            <h3 class="mb-0">
              <button class="btn btn-link" data-toggle="collapse" data-target="#collapse0_1" aria-expanded="false" aria-controls="collapse0_1">sub-collapse text</button>
            </h3>
          </div>
          <div id="collapse0_1" class="collapse" aria-labelledby="heading0_1" data-parent="#accordion" style="">
            <div class="card-body">
              <p>text</p>
            </div>
          </div>
        </div> 
      </div>
    </div>
  </div>
</div>

Upvotes: 3

Views: 3700

Answers (1)

Sebastian Brosch
Sebastian Brosch

Reputation: 43564

Just remove the data-parent="#accordion" on element with id="collapse0_1":

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>

<div id="accordion">
  <div class="card">
    <div class="card-header" id="heading0">
      <h3 class="mb-0">
        <button class="btn btn-link" data-toggle="collapse" data-target="#collapse0" aria-expanded="false" aria-controls="collapse0">textMain</button>
      </h3>
    </div>
    <div id="collapse0" class="collapse" aria-labelledby="heading0" data-parent="#accordion">
      <div class="card-body">
        <div class="card">
          <div class="card-header" id="heading0_1">
            <h3 class="mb-0">
              <button class="btn btn-link" data-toggle="collapse" data-target="#collapse0_1" aria-expanded="false" aria-controls="collapse0_1">sub-collapse text</button>
            </h3>
          </div>
          <!-- remove data-parent here or set to "#collapse0" -->
          <div id="collapse0_1" class="collapse" aria-labelledby="heading0_1">
            <div class="card-body">
              <p>text</p>
            </div>
          </div>
        </div> 
      </div>
    </div>
  </div>
</div>

If parent is provided, then all collapsible elements under the specified parent will be closed when this collapsible item is shown.
source: https://getbootstrap.com/docs/4.4/components/collapse/#options

Since you set the root element (#accordion) the whole accordion get closed.

Upvotes: 3

Related Questions