【js,css不要!】HTMLだけでアコーディオンする

てっちゃん
てっちゃん

これまでアコーディオンを作るときは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;}

入れ子にしてみた

会社案内
株式会社 電脳職人村

英語名称:Cyber Craftsmans' Village Co., LTD. 略称:CCV

法人番号

2200001025486

所在地

愛知県名古屋市中区丸の内2-17-30 ie桜通伏見ビルディング8F

事業内容
  • インターネットのトータルコンサルティング
  • webサイト全般の企画、制作、運営
  • システム構築の総合コンサルティング、制作、運営
<!-- 入れ子 -->
<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>

関連記事