これまでアコーディオンを作るときはjs(jQiery)かcssを使ってた人が多いと思いますが、
実はHTMLだけでもアコーディオンを作ることができちゃいます！

例のごとく、IEでは非対応だったこのタグ。
入れ子とかもできるので、カンタンにササっとアコーディオンさせたいときには便利ですよ^^

【アコーディオン関連の記事はこちら】
jQuery：アコーディオンメニューをサクッと作りたい時のための記事
簡単実装：CSSだけでタブ切り替え

アコーディオンしてみた！

<details>
	<summary>ここにタイトルが入るんですね～</summary>
	<p>内容はここです！ちゃんとひらきましたね～</p>
</details>

たったこれだけ！

解説

<details>

アコーディオンしたい内容全体を括ります

<summary>

アコーディオンの際に見えてる（クリックできる）部分の内容が入ります

<ブロック要素>

開閉される内容が入ります
div,p,ulなどなどいろいろなタグが使えます

その他の設定

最初から開いておきたい時

<details open>のようにopenを付けます

デフォルトの矢印を消したい時

/* Chrome、Safari以外 */
summary { display: block; }

/* Chrome、Safari */
summary::-webkit-details-marker {display: none;}

入れ子にしてみた

<!-- 入れ子 -->
<details>
	<summary>会社案内</summary>
	<details>
		<summary>株式会社 電脳職人村</summary>
		<p>英語名称：Cyber Craftsmans' Village Co., LTD. 略称：CCV</p>
	</details>
	<details>
		<summary>法人番号</summary>
		<p>2200001025486</p>
	</details>
	<details>
		<summary>所在地</summary>
		<p>愛知県名古屋市中区丸の内2-17-30 ie桜通伏見ビルディング8F</p>
	</details>
</details>
<!-- リストタグ -->
<details>
	<summary>事業内容</summary>
	<ul>
		<li>インターネットのトータルコンサルティング</li>
		<li>webサイト全般の企画、制作、運営</li>
		<li>システム構築の総合コンサルティング、制作、運営</li>
	</ul>
</details>