Collapsible Examples

The examples below assume that you have imported the component and set up the theme.

Basic

A button in the trigger slot toggles the content, and the component keeps the button's disclosure ARIA attributes in sync. The component brings no styling of its own: the trigger and the content look however your page styles them, and only the expansion is animated.

Workspace details

The collapsible animates the space this panel takes, and the button in the trigger slot toggles it.

<div class="collapsible-basic">
  <sv-collapsible>
    <button type="button" slot="trigger">Show details</button>

    <div class="details">
      <h2>Workspace details</h2>
      <p>The collapsible animates the space this panel takes, and the button in the trigger slot toggles it.</p>
    </div>
  </sv-collapsible>
</div>

<style>
  .collapsible-basic {
    inline-size: min(28rem, 100%);
    padding-block: 1em;
    margin-inline: auto;

    button {
      display: block;
      padding: 0.65em 1em;
      margin-inline: auto;
      font: inherit;
      color: var(--sv-gray-1);
      cursor: pointer;
      background: var(--sv-gray-6);
      border: solid var(--sv-bdr-sz-sm) var(--sv-gray-5);
      border-radius: var(--sv-bdr-rad-md);
    }

    .details {
      padding: 1em;
      margin-block-start: 0.5em;
      color: var(--sv-gray-2);
      background: var(--sv-gray-7);
      border-radius: var(--sv-bdr-rad-md);

      h2 {
        margin-block: 0 0.5em;
        font-size: 1.1rem;
      }

      p {
        margin: 0;
      }
    }
  }
</style>

Initial Open State

opened in the markup makes the content start expanded, with no opening animation on load. Toggling it later, from markup or script, plays the normal animated transition.

Free tracked shipping on orders over $40, delivered within 3 to 5 business days.

<div class="collapsible-initial-open">
  <sv-collapsible opened>
    <button type="button" slot="trigger">Shipping options</button>

    <div class="details">
      <p>Free tracked shipping on orders over $40, delivered within 3 to 5 business days.</p>
    </div>
  </sv-collapsible>
</div>

<style>
  .collapsible-initial-open {
    inline-size: min(28rem, 100%);
    padding-block: 1em;
    margin-inline: auto;

    button {
      display: block;
      padding: 0.65em 1em;
      margin-inline: auto;
      font: inherit;
      color: var(--sv-gray-1);
      cursor: pointer;
      background: var(--sv-gray-6);
      border: solid var(--sv-bdr-sz-sm) var(--sv-gray-5);
      border-radius: var(--sv-bdr-rad-md);
    }

    .details {
      padding: 1em;
      margin-block-start: 0.5em;
      color: var(--sv-gray-2);
      background: var(--sv-gray-7);
      border-radius: var(--sv-bdr-rad-md);

      p {
        margin: 0;
      }
    }
  }
</style>

Animation

--sv-collapsible-open-dur, --sv-collapsible-close-dur, --sv-collapsible-open-ease, and --sv-collapsible-close-ease retime the built-in transition for each direction separately. Variables set from the page win over the component's reduced motion fallback, so zero them yourself under prefers-reduced-motion: reduce.

Reduced Motion

Your system is set to reduce motion, so this animation will not play for you.

An 800ms expand and collapse with a symmetric ease, easy to follow.

duration and easing variables

<div class="collapsible-animation">
  <div class="variant">
    <sv-collapsible class="slow">
      <button type="button" slot="trigger">Show details</button>
      <p class="panel">An 800ms expand and collapse with a symmetric ease, easy to follow.</p>
    </sv-collapsible>
    <span>duration and easing variables</span>
  </div>
</div>

<style>
  .collapsible-animation {
    display: grid;
    gap: 1.5em;
    max-inline-size: 28rem;
    padding-block: 1em;
    margin-inline: auto;

    .variant {
      display: grid;
      gap: 0.4em;
      justify-items: center;

      > span {
        font-size: 0.8em;
        color: var(--sv-gray-3);
      }
    }

    sv-collapsible {
      inline-size: 100%;
    }

    button {
      display: block;
      padding: 0.65em 1em;
      margin-inline: auto;
      font: inherit;
      color: var(--sv-gray-1);
      cursor: pointer;
      background: var(--sv-gray-6);
      border: solid var(--sv-bdr-sz-sm) var(--sv-gray-5);
      border-radius: var(--sv-bdr-rad-md);
    }

    .panel {
      padding: 1em;
      margin-block: 0.5em 0;
      color: var(--sv-gray-2);
      background: var(--sv-gray-7);
      border-radius: var(--sv-bdr-rad-md);
    }

    .slow {
      --sv-collapsible-open-dur: 800ms;
      --sv-collapsible-close-dur: 800ms;
      --sv-collapsible-open-ease: ease-in-out;
      --sv-collapsible-close-ease: ease-in-out;

      @media (prefers-reduced-motion: reduce) {
        --sv-collapsible-open-dur: 0s;
        --sv-collapsible-close-dur: 0s;
      }
    }
  }
</style>