Collapsible

マークアップstyles.css

コピー

<pe-collapsible class="Collapsible">
<button type="button" class="Trigger" data-collapsible-trigger>
  Project details
</button>
<div class="Panel" data-collapsible-panel>
  <p class="Content">Plain Elements provides accessible, unstyled UI primitives.</p>
</div>
</pe-collapsible>

.Collapsible {
  display: block;
  max-width: 20rem;
  width: 100%;
  border: 1px solid oklch(14.5% 0 0);
  color: oklch(14.5% 0 0);

  @media (prefers-color-scheme: dark) {
    border-color: white;
    color: white;
  }
}

.Collapsible .Trigger {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem 0.75rem;
  margin: 0;
  border: none;
  border-radius: 0;
  background-color: transparent;
  color: inherit;
  font-family: inherit;
  font-size: 0.875rem;
  line-height: 1.25rem;
  text-align: left;
  cursor: pointer;

  @media (hover: hover) {
    &:hover:not([data-disabled]) {
      background-color: oklch(97% 0 0);

      @media (prefers-color-scheme: dark) {
        background-color: oklch(26.9% 0 0);
      }
    }
  }
}

.Collapsible .Panel {
  padding: 0 0.75rem 0.75rem;
  font-size: 0.875rem;
  line-height: 1.25rem;

  &[hidden]:not([hidden="until-found"]) {
    display: none;
  }
}

.Collapsible .Content {
  margin: 0;
}

Collapsible は単独の開閉領域、Accordion は関連項目のグループに使います。トリガーにはネイティブボタンを使い、閉じた内容をページ内検索の対象にする場合は data-collapsible-hidden-until-found を指定します。

構造

パーツ	セレクター	役割
ホスト	<pe-collapsible>	ライフサイクルと開閉状態を管理します
トリガー	[data-collapsible-trigger]	パネルを開閉します。aria-expanded と aria-controls が設定されます
パネル	[data-collapsible-panel]	必要に応じて ID が生成され、表示状態とサイズ用の CSS 変数が設定されます

ホスト、トリガー、パネルには data-state="open|closed" が設定されます。無効な要素には data-disabled も付きます。

API リファレンス

属性

名前	説明
data-collapsible-open	現在の開閉状態を反映するブール型ホスト属性。外部から変更することもできます。
data-collapsible-disabled	ホストまたはトリガーに指定すると、フォーカス可能なまま利用者による開閉操作を無効にします。
data-collapsible-hidden-until-found	ホストまたはパネルに指定すると、閉じている間は hidden="until-found" を使い、beforematch イベントで開きます。

ホスト API

名前	型	説明
isOpen	boolean (readonly)	現在の開閉状態を読み取ります。open()、close()、toggle() で状態を設定します。
disabled	boolean	ルートの無効状態を取得または設定します。
open(trigger?) / close(trigger?) / toggle(trigger?)	void	JavaScript から状態を変更します。操作元のトリガーを渡すこともできます。

CSS 変数とアニメーションフック

開閉アニメーション中は、パネルの高さと幅を --collapsible-panel-height、--collapsible-panel-width で参照できます。開くアニメーションが終わると両方とも auto に戻るため、その後に内容が増えても自然に広がります。表示開始時には data-starting-style、非表示開始時には data-ending-style が付きます。時間が有限のアニメーションについては、その終了を待ってから hidden を適用します。

.Collapsible.Animated .Panel {
  height: var(--collapsible-panel-height);
  overflow: hidden;
  transition: height 150ms ease-out;
}

.Collapsible.Animated .Panel[hidden]:not([hidden="until-found"]) {
  display: none;
}

.Collapsible.Animated .Panel[data-starting-style],
.Collapsible.Animated .Panel[data-ending-style] {
  height: 0;
}

時間が有限の非表示アニメーション終了後にパネルを隠します。beforematch ではすぐにスクロールできるよう表示アニメーションを省略します。

イベント

名前	説明
pe-collapsible:open	パネルが開いたときに発火します。イベントはバブリングし、Shadow DOM の境界も越えます。
pe-collapsible:close	パネルが閉じたときに発火します。イベントはバブリングし、Shadow DOM の境界も越えます。

イベントの detail には、open、panel、任意の trigger、reason が含まれます。reason は trigger、programmatic、attribute、beforematch のいずれかです。