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

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

 

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

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

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

 

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

 

<実行結果>

詳細を見る

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

 

 

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

関連記事