@govbr-ds/core/dist/util/collapse/examples/collapse-behavior.html

Padrão Digital de Governo

<div class="collapse-example">
  <div class="br-list" role="list" data-sub="data-sub">
    <div class="br-item" role="listitem" tabindex="0" data-toggle="collapse" data-target="c-l1">
      <div class="content">
        <div class="flex-fill">RÓTULO 01</div><i class="fas fa-angle-down" aria-hidden="true"></i>
      </div>
    </div>
    <div class="br-list" id="c-l1" role="list" hidden="hidden" data-sub="data-sub">
      <div class="br-item" role="listitem">
        <div class="row align-items-center">
          <div class="col-auto"><i class="fas fa-heartbeat" aria-hidden="true"></i>
          </div>
          <div class="col">Sub-item</div>
        </div>
      </div><span class="br-divider"></span>
      <div class="br-item" role="listitem">
        <div class="row align-items-center">
          <div class="col-auto"><i class="fas fa-heartbeat" aria-hidden="true"></i>
          </div>
          <div class="col">Sub-item</div>
        </div>
      </div><span class="br-divider"></span>
      <div class="br-item" role="listitem">
        <div class="row align-items-center">
          <div class="col-auto"><i class="fas fa-heartbeat" aria-hidden="true"></i>
          </div>
          <div class="col">Sub-item</div>
        </div>
      </div><span class="br-divider"></span>
    </div>
    <div class="br-item" role="listitem" tabindex="0" data-toggle="collapse" data-target="c-l2">
      <div class="content">
        <div class="flex-fill">RÓTULO 02</div><i class="fas fa-angle-down" aria-hidden="true"></i>
      </div>
    </div>
    <div class="br-list" id="c-l2" role="list" hidden="hidden" data-sub="data-sub">
      <div class="br-item" role="listitem">
        <div class="row align-items-center">
          <div class="col-auto"><i class="fas fa-heartbeat" aria-hidden="true"></i>
          </div>
          <div class="col">Sub-item</div>
        </div>
      </div><span class="br-divider"></span>
      <div class="br-item" role="listitem">
        <div class="row align-items-center">
          <div class="col-auto"><i class="fas fa-heartbeat" aria-hidden="true"></i>
          </div>
          <div class="col">Sub-item</div>
        </div>
      </div><span class="br-divider"></span>
      <div class="br-item" role="listitem">
        <div class="row align-items-center">
          <div class="col-auto"><i class="fas fa-heartbeat" aria-hidden="true"></i>
          </div>
          <div class="col">Sub-item</div>
        </div>
      </div><span class="br-divider"></span>
    </div>
    <div class="br-item" role="listitem" tabindex="0" data-toggle="collapse" data-target="c-l3">
      <div class="content">
        <div class="flex-fill">RÓTULO 03</div><i class="fas fa-angle-down" aria-hidden="true"></i>
      </div>
    </div>
    <div class="br-list" id="c-l3" role="list" hidden="hidden" data-sub="data-sub">
      <div class="br-item" role="listitem">
        <div class="row align-items-center">
          <div class="col-auto"><i class="fas fa-heartbeat" aria-hidden="true"></i>
          </div>
          <div class="col">Sub-item</div>
        </div>
      </div><span class="br-divider"></span>
      <div class="br-item" role="listitem">
        <div class="row align-items-center">
          <div class="col-auto"><i class="fas fa-heartbeat" aria-hidden="true"></i>
          </div>
          <div class="col">Sub-item</div>
        </div>
      </div><span class="br-divider"></span>
      <div class="br-item" role="listitem">
        <div class="row align-items-center">
          <div class="col-auto"><i class="fas fa-heartbeat" aria-hidden="true"></i>
          </div>
          <div class="col">Sub-item</div>
        </div>
      </div><span class="br-divider"></span>
    </div>
  </div>
</div>