CSS detailsタグで折りたたみ可能な要素を作成するサンプル

2023年3月23日

環境
Google Chrome　111.0.5563.65（Official Build）
Windows 10 Home 64bit

書式
<details> は HTML の要素で、ウィジェットが「開いた」状態になった時のみ情報が表示される折りたたみウィジェットを作成します。

使用例

<!DOCTYPE html>
<html>
<head>
<style>
/* 全体 */
details {
}

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

/* マーカー、開閉ボタン */
details > summary::-webkit-details-marker {
  display: none;
}
</style>
</head>
<body>
<details open>
  <summary>東京tokyo</summary>
  <p>大阪oosaka</p>
</details>

</body>
</html>

結果
<details>タグの中に<summary>タグを設置して折りたたみ要素の見出しを表示します。
<summary>より後に記述されたHTML要素は折りたたまれ、開閉します。

CSS

Posted by arkgame