AXA Design System Lib Documentation v1.0.0

A good way to display a long section of content by hiding it or revealing under a block thanks to the action of the user. This is mainly used for secondary content and it’s important to avoid hiding important information into this block.

Example

Link with href

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

<p>
  <a
    class="btn btn-primary"
    data-bs-toggle="collapse"
    href="#collapseExample"
    role="button"
    aria-expanded="false"
    aria-controls="collapseExample"
  >
    Link with href
  </a>
  <button
    class="btn btn-primary"
    type="button"
    data-bs-toggle="collapse"
    data-bs-target="#collapseExample"
    aria-expanded="false"
    aria-controls="collapseExample"
  >
    Button with data-bs-target
  </button>
</p>
<div class="collapse" id="collapseExample">
  <div class="card card-body">
    Some placeholder content for the collapse component. This panel is hidden by
    default but revealed when the user activates the relevant trigger.
  </div>
</div>

Multiple targets

The buttons can also open several targets depending on the content.

Toggle first element

Some placeholder content for the first collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.

Some placeholder content for the second collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.

<p>
  <a
    class="btn btn-primary"
    data-bs-toggle="collapse"
    href="#multiCollapseExample1"
    role="button"
    aria-expanded="false"
    aria-controls="multiCollapseExample1"
    >Toggle first element</a
  >
  <button
    class="btn btn-primary"
    type="button"
    data-bs-toggle="collapse"
    data-bs-target="#multiCollapseExample2"
    aria-expanded="false"
    aria-controls="multiCollapseExample2"
  >
    Toggle second element
  </button>
  <button
    class="btn btn-primary"
    type="button"
    data-bs-toggle="collapse"
    data-bs-target=".multi-collapse"
    aria-expanded="false"
    aria-controls="multiCollapseExample1 multiCollapseExample2"
  >
    Toggle both elements
  </button>
</p>
<div class="row">
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample1">
      <div class="border py-4 px-3">
        Some placeholder content for the first collapse component of this
        multi-collapse example. This panel is hidden by default but revealed
        when the user activates the relevant trigger.
      </div>
    </div>
  </div>
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample2">
      <div class="border py-4 px-3">
        Some placeholder content for the second collapse component of this
        multi-collapse example. This panel is hidden by default but revealed
        when the user activates the relevant trigger.
      </div>
    </div>
  </div>
</div>

Documentation

Components