detailsタグとsummaryタグを使ってみる

アコーディオンのようにコンテンツの開閉ができるようになるdetailsタグとsummaryタグを使ってみます。

対応ブラウザ

対応ブラウザはこちら
IE以外は概ね対応しているようです。

サンプルコード

summaryタグ(アコーディオンの見出しになる要素)と開閉させるコンテンツをdetailsタグで囲えばOKです。

<details>
	<summary>一期生出身</summary>
	<ul>
		<li>月ノ美兎</li>
		<li>勇気ちひろ</li>
		〜 略 〜
		<li>モイラ</li>
	</ul>
</details>

最初はsummaryタグの内容のみが表示された状態になり、summaryタグ部分をクリックするとそれ以外(ul)が表示されるようになります。
detailsとsummaryのデモページ

summaryのテキストに「▶︎」のアイコンはCSSで非表示にできます。

/* Firefox */
summary {
	list-style: none;
}
/* chrome / Safari */
summary::-webkit-details-marker {
	display: none;
}

▶︎を非表示にするデモページ

コンテンツの開閉はdetailsタグにopenという属性を追加/削除して行なっているので、open属性を付与しておくことで最初から開いた状態にもできます。

<details open>
	<summary>ゲーマーズ出身</summary>
	<ul>
		<li>叶</li>
		<li>赤羽葉子</li>
		〜 略 〜
		<li>椎名唯華</li>
	</ul>
</details>

コンテンツを最初から開いた状態にするデモページ

デフォルトだと開閉時にアニメーションが特にないので、アニメーションの追加を試してみます。
最初はtransitionとopacityを使って試してみて、Firefoxだとフェードで開くことができたのですが、それ以外だとフェードが効いていませんでした。

<details>
	<summary>SEEDs一期生出身</summary>
	<ul class="details-content">
		<li>ドーラ</li>
		<li>轟京子</li>
		〜 略 〜
		<li>卯月コウ</li>
	</ul>
</details>

details .details-content {
	opacity: 0;
	visibility: hidden;
	transition: 1000ms;
}
details[open] .details-content {
	opacity: 1;
	visibility: visible;
}

フェードのアニメーション追加のデモページ

別の方法として高さを変更するアニメーションの場合、各ブラウザでアニメーションさせることができました。

details {
	height: 20px;
	overflow: hidden;
	transition: 1000ms;
}
details[open] {
	height: 440px;
}

ただし、高さを固定値で指定しないといけないので、実際に使う場合は予めjsで高さを取得しておくなど、何らかの対応が必要そうです。
高さを変更するアニメーションのデモページ