開閉メニューはdetailsタグが便利（javascript、css不要）

開閉メニューを作成する場合、 JavaScript（jQuery）やCSSを使うのが今までのやり方でした。

ですが、HTML5で追加された「details」タグを使えば、 JavaScript（jQuery）やCSSを使うことなく、 簡単に開閉メニューを作ることができます。

ここでは、「details」タグを使って開閉メニューを作る方法を紹介します。

（補足: ブラウザの対応状況）
2018年9月時点で、「Edge」「IE」はdetailsタグに残念ながら対応していません。

「Edge」「IE」が対応すれば、detailsタグを使った手法がメジャーな手法になると思います。

ブラウザの対応状況はこちらで調べられます。

https://caniuse.com/

シンプルな開閉メニュー

「メニューA」の中にA-1、A-2、A-3があって、
「メニューB」の中にB-1、B-2、B-3があるシンプルな開閉メニューです。

---

メニューA

• A-1
• A-2
• A-3

メニューB

• B-1
• B-2
• B-3

---

上の開閉メニューのコードは以下の通りです。

detailsタグとsummaryタグを使っています。

<details>
	<summary>メニューA</summary>
	<ul>
	  <li>A-1</li>
	  <li>A-2</li>
	  <li>A-3</li>
	</ul>
</details>
<details>
	<summary>メニューB</summary>
	<ul>
	  <li>B-1</li>
	  <li>B-2</li>
	  <li>B-3</li>
	</ul>
</details>

たったこれだけのコードで開閉メニューができます。

開閉状態を示す三角マークも自動で付けてくれるので、 いたれりつくせりのタグです。

階層のある開閉メニュー

次のような階層を持つメニューを作成します。

メニューA
├ A-1
│ ├ A-1-1
│ ├ A-1-2
│ └ A-1-3
└ A-2
　 ├ A-2-1
　 ├ A-2-2
　 └ A-2-3

下は実際のメニューです。

---

メニューA

A-1

• A-1-1
• A-1-2
• A-1-3

A-2

• A-2-1
• A-2-2
• A-2-3

---

上のメニューのHTMLコードは次の通りです。

<details>
	<summary>メニューA</summary>
	<details>
		<summary>A-1</summary>
		<ul>
		  <li>A-1-1</li>
		  <li>A-1-2</li>
		  <li>A-1-3</li>
		</ul>
	</details>
	<details>
		<summary>A-2</summary>
		<ul>
		  <li>A-2-1</li>
		  <li>A-2-2</li>
		  <li>A-2-3</li>
		</ul>
	</details>
</details>

まとめ

・開閉メニューはdetailsタグを使うと簡単に実装できます。

・階層のある開閉メニューも作れます。

・ただし、「Edge」「IE」は現時点では対応していません。