簡単アコーディオンメニュー作成。便利な折り畳み表示ができる<details>タグ

こんにちは！ あますた(@amaguristar)です。

• 「この説明必要な人だけに表示できればいいんだよな」
• 「折り畳み可能な目次をサクッと作りたい」

そんな時ありませんか？ その悩みdetailsタグを使えば簡単に解決できます。

detailsタグを使うとできること

まずはどんなものができるのか簡単に説明。

↑左の▶︎を押すと詳細を確認可能。

「この説明長いから確認したい人だけ見た方がいいな」って時にとても便利。もちろんcssを編集すれば見た目も好みにカスタマイズ可能(今回は割愛)。

応用すれば目次にも使えます。

コードを書いても良いかもしれませんね。

#include 

int main()
{

    return 0;
}

実際の使い方

それではサクッと実際の使い方を説明。

<details>
<summary>ここに概要</summary>
<div>ここに詳細</div>
</details>

基本は上記のみ。

<summary>〜</summary>タグに表示する概要を入れて、詳細をその下に書けば良いのみ。

当然、全てが<details>〜</details>の間に入ってる必要があります。

最初から開いた状態で表示するには<details>タグの中にopenプロパティを追加するだけ。

<details open>
<summary>オープンテスト</summary>
<div>これが開いたまま表示されてたら成功</div>
</details>

上記を実際に利用すると、

↑この様に開いた(広がった？)状態で表示されます。

まとめ

いかがだったでしょうか？

今回は簡単な利用方法のみをご説明。cssで見た目をかえたり、スクリプトを追加してアニメーションをつけたりなど好みでカスタマイズ可能。

詳しいカスタム方法は別でご紹介します。

htmlだけで簡単にアコーディオンメニューを作成できる<details>タグをぜひ利用してみて下さい。