今までウィジェットの開く・閉じる動作をJavaScriptで頑張っていたんですが、アコーディオンメニューというものを知り、HTMLだけで対応できたので検証しました。
1. イメージ
↓↓クリックすると↓↓
ウィジェットが開き、詳細のメッセージが表示される。
2. コード例
summary要素には、常に表示されている見出しを入れます。
summary要素を省略した場合、「詳細」の文言がデフォルトで設定されます。
details要素の直下には、詳細情報を入れます。
詳細情報はデフォルトだとClose状態ですが、details要素にopen属性を指定することで、最初から開かれた状態にすることができます。
アコーディオンメニューという呼ばれ方は初めて知ったけど、JavaScriptを使わなくても簡単に実装できるからとても便利。
しかも、開くときのアニメーションとか、色々カスタマイズできるようなので気が向いたら調べてみます。