HTMLだけでアコーディオンメニューを作る

HTMLの<details>タグと<article>タグを使うと簡単なアコーディオンメニュー(開閉メニュー)がHTMLだけで実装可能です。<article>以外の箇所が開閉する仕組みになります。

<details>
    <summary>リンゴとは?</summary>
    <p>リンゴとは、バラ科リンゴ属の落葉高木、またはその果実のこと。</p>
</details>

※<p>タグ以外のタグも使用可能<summary>タグの後ろに文章があればそれは全て開閉できます。

閉じている状態

<summary>タグ以外の箇所は、隠れている状態です。

開いている状態

<summary>タグの文字箇所をクリックで開閉できます。

開いている状態の画像

開いた時は矢印の向きも変わります。
CSSなどをうまく使ってデザインすれば、いい感じのアコーディオンメニューになりそうですね。

※IEには非対応のようです。

ぜひ参考にしてみてください。

インスタでHTML,CSSの小技を配信中

タイトルとURLをコピーしました