Collapsible

An interactive panel that expands/collapses content. Built on native <details> with animated transitions.

Component Skill — components/collapsible/component-skill.md

Native basis

<details> element providing native expand/collapse behavior with animated transitions.

Web Platform APIs

<details> <summary> ::details-content @starting-style

Classes

.collapsible .collapsible-trigger .collapsible-chevron .collapsible-content

Accessibility

• <details>/<summary> is natively accessible — keyboard and screen reader support built in

• No additional ARIA attributes needed

• Summary text should clearly describe the hidden content

Basic

Simple collapsible with a trigger and content.

Can I use this in my project?

Yes. Free to use for personal and commercial projects. No attribution required.

<details class="collapsible">
  <summary class="collapsible-trigger">
    <span>Can I use this?</span>
    <svg class="collapsible-chevron">...</svg>
  </summary>
  <div class="collapsible-content">
    <p>Yes, it's free to use.</p>
  </div>
</details>

Open by Default

Use the open attribute to start expanded.

Product details

This component uses the native <details> element with CSS animations for smooth expand/collapse transitions.

No JavaScript required for the basic functionality — the browser handles the toggle natively.

<details class="collapsible" open>
  <summary class="collapsible-trigger">...</summary>
  <div class="collapsible-content">...</div>
</details>

Multiple Sections

Stack multiple collapsibles for a settings-style panel.

Appearance

Customize the look and feel of your workspace.

Notifications

Manage your notification preferences.

Privacy

Control your privacy and data sharing settings.

CSS view file

Styles for the collapsible component. Uses design tokens for colors, spacing, and radius.

@layer components {
  .collapsible {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;

    & ::details-content {
      block-size: 0;
      overflow-y: clip;
      transition: block-size 200ms ease, content-visibility 200ms allow-discrete;
    }

    &[open] ::details-content {
      block-size: auto;
    }
  }

  @starting-style {
    .collapsible[open] ::details-content {
      block-size: 0;
    }
  }

  .collapsible-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    color: var(--foreground);
    list-style: none;

    &:hover {
      background-color: var(--accent);
    }

    &:focus-visible {
      outline: 2px solid var(--ring);
      outline-offset: -2px;
    }

    &::-webkit-details-marker {
      display: none;
    }
  }

  .collapsible-chevron {
    width: 1rem;
    height: 1rem;
    color: var(--muted-foreground);
    transition: transform 200ms ease;
    flex-shrink: 0;

    details[open] > summary > & {
      transform: rotate(180deg);
    }
  }

  .collapsible-content {
    padding: 0 1rem 0.75rem;
    font-size: 0.875rem;
    color: var(--muted-foreground);
    line-height: 1.6;
  }
}