HTML | detailsタグで折りたたみ可能な要素を作成する

2022-01-292022-06-22HTML コンテンツ,HTML

CSSやJavascriptを使わずにHTMLの<details>タグを使って折りたたみ可能な要素を作成する方法を紹介しています。

detailsタグで折りたたみ可能な要素を作成する

HTMLだけで折りたたみ可能な要素を作成する事のできる<details>タグを使った表示サンプルと簡単なサンプルコードになります。

<details>タグの中に<summary>タグを設置して折りたたみ要素の見出しを記述します。

<summary>より後に記述されたHTML要素は折りたたまれ、開閉する事が可能になります。

<details>
  <summary>吾輩は猫である</summary>
  <p>吾輩は猫である。名前はまだない。どこで生れたか頓と見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。</p>
</details>

初期状態で開いているようにする指定方法

<details>タグは属性「open」を付与しておく事で初期状態で開いた状態にする事が可能となっています。

この場合も、自由に開閉する事が可能です。

また、この属性「open」をプログラムで指定、解除することでJavascriptなどで動的に切り替える事も可能です。

<details open>
  <summary>吾輩は猫である</summary>
  <p>吾輩は猫である。名前はまだない。どこで生れたか頓と見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。</p>
</details>

スタイルを指定する

<details>で作成した折りたたみ要素は、全体、見出し、開閉ボタンともにCSSでカスタマイズする事が可能です。

見出し部分をクリック、タップする事でも開閉しますので例えば開閉ボタンを「display: none;」で非表示にする事もできます。

/* 全体 */
details {
}

/* 見出し */
details > summary {
}

/* マーカー、開閉ボタン */
details > summary::-webkit-details-marker {
  display: none;
}