要素を押したら、詳細が出てくるあれ！
業務でもよく使うアコーディオンですが、じつはJSを使わずともHTMLだけで実装できます。
※サポートされていないブラウザがあるので、実際に使用する際はよく確認して使用してください。
今回使用するHTMLタグは「details」。
詳細折りたたみ要素です。
では、早速実装してみましょう！
HTMLだけでアコーディオンを実装する方法
「details」の中に「summary」を追加します。
「summary」の要素をクリックすることで、隠してある要素が表示されるようになります。
<details>
<summary>詳細を見る</summary>
詳細です。詳細です。詳細です。詳細です。詳細です。詳細です。
</details>
＜実行結果＞
詳細を見る
詳細です。詳細です。詳細です。詳細です。詳細です。詳細です。
こんな感じ！
いちいちJS書いて実装しなくていいので、めちゃくちゃ便利ですね。
ただ実務であんまり見たことないけど…
web制作を勉強したい方におすすめの教材も紹介しているので是非参考にしてみてください。
web制作の勉強にオススメの書籍を紹介します！
ABOUT ME
