タグ

2024年1月11日のブックマーク (1件)

  • これは知っておくとかなり便利! details要素にname属性を与えると、連動して開閉するアコーディオンを実装できます

    <details>要素でアコーディオンを簡単に実装できますが、懸念点は複数のウィジェットが個別に開閉してしまうことです。1つ目を開いて、2つ目を開くと、1つ目は開いたままです。1つ目を閉じるには、1つ目をクリックして閉じる必要がありました。 しかし、<details>要素にname属性を与えると、すべてのウィジェットを連動して開閉させることができます。1つのウィジェットだけを開くことができる排他的アコーディオンをHTMLCSSだけで実装する方法を紹介します。 Exclusive Accordion by Bramus 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 アコーディオンの実装 1つのウィジェットだけを開くことができる排他的アコーディオン 排他的アコーディオンのポリフィル アコー

    これは知っておくとかなり便利! details要素にname属性を与えると、連動して開閉するアコーディオンを実装できます
    coliss
    coliss 2024/01/11
    details要素にname属性を与えると、1つのウィジェットだけを開くことができる排他的アコーディオンを簡単に実装できます。