Basic collapsible

Use the trigger slot for built-in disclosure behavior.

Workspace details

Collapsible supplies the animation while the button supplies the disclosure semantics.

Code

The following example assumes that you have imported the component and set up the theme.

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

    <div class="details">
      <h2>Workspace details</h2>
      <p>Collapsible supplies the animation while the button supplies the disclosure semantics.</p>
    </div>
  </sv-collapsible>
</div>

34 collapsed lines
<style>
  .collapsible-example {
    inline-size: min(28rem, 100%);
    margin: auto;

    button {
      display: block;
      padding: 0.65em 1em;
      margin: 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>