Collapse

How it works

Toggle the visibility of content across your project with a few classes and Bootstrap JavaScript plugins.

Basic example

The collapse JavaScript plugin is used to show and hide content. Buttons or anchors are used as triggers that are mapped to specific elements you toggle. Instead, use the class as an independent wrapping element.

Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.

Collapse with link

Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.

Creating collapse do it yourself!

<x-collapse button="Collapse with button">
  <x-slot name="content">
    <div class="p-3 border rounded mt-3">
      Some placeholder content for the collapse component. This panel is hidden by default but revealed when the
      user activates the relevant trigger.
    </div>
  </x-slot>
</x-collapse>

<x-collapse link="Collapse with link">
  <x-slot name="content" class="card card-body mt-3">
    Some placeholder content for the collapse component. This panel is hidden by default but revealed when the
    user activates the relevant trigger.
  </x-slot>
</x-collapse>

<x-collapse button="Using component x-collapse.content">
  <x-collapse.content class="card card-body mt-3">
    Some placeholder content for the collapse component. This panel is hidden by default but revealed when the
    user activates the relevant trigger.
  </x-collapse.content>
</x-collapse>

<x-button color="danger"
          large
          toggle="collapse"
          data-bs-target="#requiredToSetId"
          aria-expanded="false"
          aria-controls="requiredToSetId">With custom button</x-button>
<x-collapse.content id="requiredToSetId" class="card card-body mt-3">
  Creating collapse do it yourself!
</x-collapse.content>

<button type="button"
      data-bs-toggle="collapse"
      data-bs-target="#collapse-9N64YqBBMkiFEa8V2BgM"
      aria-expanded="false"
      aria-controls="collapse-9N64YqBBMkiFEa8V2BgM"
      class="btn btn-primary">Collapse with button</button>
<div id="collapse-9N64YqBBMkiFEa8V2BgM"
     class="collapse">
  <div class="p-3 border rounded mt-3">
    Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
  </div>
</div>

<hr>
<a data-bs-toggle="collapse"
      href="#collapse-QsYBB4aG75hvhCsWGcb5"
      role="button"
      aria-expanded="false"
      aria-controls="collapse-QsYBB4aG75hvhCsWGcb5">Collapse with link</a>
<div id="collapse-QsYBB4aG75hvhCsWGcb5"
     class="collapse card card-body mt-3">
  Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
</div>

<hr>
<button type="button"
      data-bs-toggle="collapse"
      data-bs-target="#collapse-78vAOfW0BrbZ1oIv4nnr"
      aria-expanded="false"
      aria-controls="collapse-78vAOfW0BrbZ1oIv4nnr"
      class="btn btn-primary">Using component x-collapse.content</button>
<div id="collapse-78vAOfW0BrbZ1oIv4nnr"
     class="collapse card card-body mt-3">
  Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
</div>

<hr>
<button type="button"
      data-bs-toggle="collapse"
      data-bs-target="#requiredToSetId"
      aria-expanded="false"
      aria-controls="requiredToSetId"
      class="btn btn-danger btn-lg">With custom button</button>
<div class="collapse card card-body mt-3"
     id="requiredToSetId">
  Creating collapse do it yourself!
</div>