コラプシブル

<%# Markup for the collapsible (APG Disclosure) demo.
    The trigger opens/closes a single region inline. The library syncs aria-expanded /
    hidden / data-state and the content's measured-height variable; the look (the
    height transition) lives in demo.css. %>
<div class="collapsible" data-controller="stimeo--collapsible">
  <button
    class="collapsible__trigger"
    type="button"
    aria-expanded="false"
    aria-controls="collapsible-demo-content"
    data-stimeo--collapsible-target="trigger"
    data-action="click->stimeo--collapsible#toggle">
    <span class="collapsible__chevron" aria-hidden="true"></span>
    <%= t("components.collapsible.demo.trigger") %>
  </button>
  <div
    class="collapsible__content"
    id="collapsible-demo-content"
    data-state="closed"
    hidden
    data-stimeo--collapsible-target="content">
    <p class="collapsible__body"><%= t("components.collapsible.demo.body") %></p>
  </div>
</div>

/*
 * Presentation-only styles for the collapsible demo.
 * The open/close animation uses the data-state the library sets on the content
 * target and --stimeo-collapsible-content-height (the content's measured height).
 */

.collapsible {
  max-width: 32rem;
  border: 1px solid var(--border-default);
  border-radius: 0.5rem;
  overflow: hidden;
}

.collapsible__trigger {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.75rem 1rem;
  background: var(--surface-subtle);
  border: 0;
  font: inherit;
  font-weight: 600;
  color: var(--fg);
  cursor: pointer;
  text-align: left;
}

.collapsible__chevron {
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 0.2s ease;
}

.collapsible__trigger[aria-expanded="true"] .collapsible__chevron {
  transform: rotate(45deg);
}

/* Transition the height while opening/closing or open (i.e. once hidden is removed). */
.collapsible__content {
  height: 0;
  overflow: hidden;
  transition: height 0.2s ease;
}

.collapsible__content[data-state="open"] {
  height: var(--stimeo-collapsible-content-height);
}

.collapsible__body {
  margin: 0;
  padding: 1rem;
}

/* Disable the transition under reduced motion (fall back to instant open/close). */
@media (prefers-reduced-motion: reduce) {
  .collapsible__content,
  .collapsible__chevron {
    transition: none;
  }
}