HTMLだけで簡単にアコーディオンを実装する方法

要素を押したら、詳細が出てくるアコーディオン。
JSで作りがちなアコーディオンですが、HTMLだけでも簡単に実装することができます。
※サポートされていないブラウザがあるので、実際に使用する際はよく確認して使用してください。

では、早速実装してみましょう！

HTMLだけでアコーディオンを実装する方法

今回使用するHTMLタグは「details」。
詳細折りたたみ要素です。

「details」の中に「summary」を追加して使用します。
「summary」の要素をクリックすることで、隠してある要素が表示されます。

<details>
    <summary>詳細を見る</summary>
    詳細です。詳細です。詳細です。詳細です。詳細です。詳細です。
</details>

＜実行結果＞

詳細を見る

詳細です。詳細です。詳細です。詳細です。詳細です。詳細です。

こんな感じ！
JSを書かず、HTMLだけで簡単にアコーディオンを実装できるのでめちゃくちゃ便利ですね。
ただ実務であんまり見たことないけど…