details要素で開閉式のウィジェットを表示できる【HTML】

details要素を使うと、閲覧者が操作可能な開閉式のウィジェットを表示することができます。

たとえば以下のようなもの。

カテゴリー

見出しの「カテゴリー」をクリックすると、階層型になっているメニューが開閉されます。

現在はopen属性（論理属性）を指定しているので、メニューは初期状態で展開された状態になっています。

summary要素

details要素で開閉式のウィジェットを表示することができますが、そのdetails要素の子要素として使うのがsummary要素です。

summary要素は、項目の要約だったり説明文を表すものとして使います。最初に紹介した例でいうと、「カテゴリー」と記述してある部分がsummary要素でマークアップしているところです。

<details open>
<summary>カテゴリー</summary>
<ul>
<li>旅</li>
<li>カメラ</li>
<li>Web</li>
<li>暮らし</li>
</ul>
</details>

メニューの各項目にはリストのul要素やli要素を使っています。