JS不要でアコーディオンメニューを作るHTMLタグ【details】

こんにちは、DAFUです。

今回はHTML5で使えるタグのうち、Detailsというタグの説明です。

このタグを使うと以上のように、パカパカ開くテキストボックスを簡単に実装でき、いい感じのFAQとかできます。

サンプルコード

<details>
	<summary>見出し</summary>
	<p>解説とか説明とか</p>
</details>

これで先述したサンプルのようなものになります。

しかし、このままではブサイクなので、CSSを使って少し調節してやります。

CSSサンプル

details{
  padding: 10px 15px;
  border: solid 1px #333;
  border-radius: 5px;
}

このようにCSSをあてるとそれなりに見れるものになります。

ちなみにこれは上記のものと使っているCSSは同じです。

まとめ

いかがでしたでしょうか。JSを使わなくてもアコーディオンメニューが作れるので便利だと思います。

ではまた。ﾉｼ