HTML

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

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

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

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

 

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

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

 

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

 

<実行結果>

詳細を見る

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

 

 

こんな感じ!
いちいちJS書いて実装しなくていいので、めちゃくちゃ便利ですね。
ただ実務であんまり見たことないけど…

 

 

web制作を勉強したい方におすすめの教材も紹介しているので是非参考にしてみてください。
web制作の勉強にオススメの書籍を紹介します!

ABOUT ME
シラツキ
Web制作会社で働くフロントエンドエンジニア(コーダー)。HTML,CSS,JS,WordPress,EC-CUBE,Next.jsなど制作に役立つ情報を発信していきます。 webサイトの運営、修正、制作などお仕事も募集中! お気軽にご相談ください。
web制作で独学で稼ぎたいという人必見!
RELATED POST

COMMENT

メールアドレスが公開されることはありません。

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)