ナビゲーション / 必要なときに詳細を開く
Disclosure
補足情報を折りたたみ、何が入っているかを明示します。
基本的な使い方
解析が止まった理由 2件
- SQL文が実行時の入力に依存しています。
- 外部ライブラリの定義を取得できません。
HTML
<details class="disclosure">
<summary>解析が止まった理由 <span class="count">2件</span></summary>
<div class="disclosure-body"><ul><li>SQL文が実行時の入力に依存しています。</li><li>外部ライブラリの定義を取得できません。</li></ul></div>
</details>クラスと属性
| クラス / 属性 | 用途 |
|---|---|
.disclosure | 標準のdetails要素。 |
.disclosure-body | 展開した内容の余白。 |
.disclosure-boxed | 単独の項目を枠で囲む変種。 |
.disclosure-group | 端を揃えた開閉要素のグループ。 |
使い方の注意
summaryで内容を説明します。重要な結論を中に隠さないでください。JavaScriptなしで動作します。
作例はシステムの配色設定に従います。ヘッダーの◐で自動・ライト・ダークを試せます。