2025.08.27

Accordion with only CSS in 2026

Accordion with interpolate

Lorem ipsum dolor sit amet. Ut officiis velit hic quaerat architecto ex vero deleniti eos voluptate dolore sed sequi quibusdam. Non incidunt beatae non magnam internos et magnam perferendis quo quos esse et fugiat recusandae. Ut quis quibusdam et possimus aspernatur et velit eveniet qui pariatur itaque aut veritatis sequi et quidem eaque. Ut pariatur iure a eaque totam ut ipsam consectetur qui cupiditate voluptas sed exercitationem voluptas aut iusto molestias et cumque voluptatum.Hic magni officia in atque quia et fuga sint aut molestiae facilis eum labore ipsa qui temporibus sint. Ad labore eaque est rerum totam non debitis doloremque sed quia harum et laboriosam omnis qui omnis debitis!Sed illo sint et pariatur dolores quo atque eius aut maiores exercitationem. 33 optio quibusdam eum consequatur dolorem ut adipisci iste! Nam voluptatem aliquam et possimus commodi qui molestiae fugit id laboriosam quia et rerum nostrum aut architecto enim.

Accordion with interpolate

html

<details name='accordion'>
  <summary>Accordion with interpolate</summary>
  <p>hoge</p>
</details>

css

:root {
  interpolate-size: allow-keywords
}

details::details-content {
  overflow: clip;

  @media (prefers-reduced-motion: no-preference) {
    transition-duration: 300ms;
    transition-property: content-visibility, block-size;
    transition-behavior: allow-discrete; // not on :root
  }
}

details:not([open])::details-content {
  block-size: 0;
}

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

●概要

::details-content、interpolate-size: allow-keywords、transition-behavior: allow-discreteの3キーワードを軸にCSSのみでアニメーション付きアコーディオンを実装する方法。
iOS18.4よりdetails-content内のsummary以外のコンテンツを一括指定する疑似要素::details-contentが使用可能となった。
またChromium129よりプログレッシブエンハンスメントとして「相対値に対してアニメーション、トランジションを可能とする」プロパティinterpolate-size: allow-keywordsが使用可能となった。
この2点を加えることで、従来にアニメーション用divを必要としない(構造的汚染を持たない)アコーディオンアニメーションが可能となる。
非展開時の::details-contentにblock-size: 0をすることで展開時のblock-size: autoに対しinterpolte-sizeおよびtransition-behavior / propertyで許可したアニメーションが実行される。

●注意点

interpolate-sizeプロパティは iOS26 時点でも未対応のため、現状Chromium限定のプログレッシブ・エンハンスメントとなり2026年時点では実用的ではない。

::details-content に対してはoverflow: clipを指定しないとアコーディオンを開いた瞬間コンテンツ全体がアコーディオンを突き抜けてしまうので注意。

また iOS18.4 から対応となる::details-contentおよびallow-discreteについても実務で使用可能かギリギリのため、フォールバックを必ず添えるか実務での使用自体を見送るべきである。

●キーワード

●::details-content
- Baseline2025 Newly Available
<summary>を除く<details>要素内の拡張/折りたたみ可能なコンテンツを指定する疑似要素。

●transition-bahavior: allow-discrete
- Baseline2024 Newly Available
display: blockからnone、content-visibility: visibleからhiddenといった、リニアではなくイチからゼロにトグル式で切り替わる離散的プロパティに対しリニアなアニメーションの実行を許可するキーワード。
例えば::details-contentに対しフェードイン・アウトを実装する場合、transitionに対しopacityおよびcontent-visibilityを指定することでopacityアニメーションの実行が終了してからcontent-visibilityの状態をトグルさせる形で離散的プロパティに対するアニメーションを処理する。
なお現状transition-behaviorプロパティは離散的プロパティへのアプローチのみ対応となっている。

●interpolate-size: allow-keywords
- Limited Availability
相対値やauto / fit-content / max-contentといった固定値以外のサイズキーワードに対しtransition等アニメーションの付与を許可するプロパティ。
transformなどボックスモデル以外のCSSプロパティ(安直に書けば inline-size や block-size を伴わないもの)をアニメーション対象とすることは不可能。
MDNでは注意点として既存サイトで雑に有効化すると「離散的プロパティはアニメーションしないもの」と前提で設計されたページを破壊する可能性があると示唆している。

参照：
・MDN - ::details-content
・MDN - transition-behavior
・MDN - interpolate-size

Accordion with grid

html

<details name='accordion'>
  <summary>Accordion with grid</summary>
  <div class='for__animation'>
    <div class='content__wrapper'>
      <p>hoge</p>
    </div>
  </div>
</details>

css

.for__animation {
  overflow: hidden;
}

details::details-content {
  content-visibility: unset; // for safari
  display: grid;

  @media (prefers-reduced-motion: no-preference) {
    transition-duration: 300ms;
    transition-property: grid-template-rows;
  }
}

details:not([open]) {
  grid-template-rows: 0fr;
}

details[open] {
  grid-template-rows: 1fr;
}

●概要

grid-template-rowsに対してtransitionを効かせることでスライドトグルを実装する方法。
同じく::details-contentの対応状況が 1OS18.4 以降のため実務上使用可能かはギリギリだが、プログレッシブエンハンスメントに頼りきりの上記実装例よりはマシといったところか。

overflow: clipではスクロールコンテナが生成されずgrid-template-rowsのアニメーションが効かないため、overflow: hiddenを指定する必要がある。

Safariにてcontent-visibilityに対するtransitionが効かないというマイナーなバグが存在するため、対抗策としてcontent-visibility: unsetを指定する必要がある。