クリックで開閉するアコーディオンメニューを素のJavaScript(Vanilla JS)で制作する方法を解説します。ここでご紹介する内容は、他のサイトで紹介されているコートだと達成したい仕様が満たされなかったり、実装の仕方が悪いのか挙動がおかしかったりしたので、自作したものです。 使いまわしもしやすいコードで使いやすいものになっていると思いますので、ぜひご活用ください。 またウェブアクセシビリティのためのWAI-ARIAも対応しています。 実装結果デモ まずは実装した結果をご確認ください。 後述する仕様のうち、アコーディオンを開いた時にスクロールを許容する部分はスクロールバーが存在するCODEPENだと表現が難しかったので、その点は別途ご自分でご確認いただければと思います。 See the Pen Accordion by Takahiro Inada (@tkhr1) on CodeP
![素のJavaScriptでアコーディオンメニューを作る(クリックで開閉・jQueryなし・WAI-ARIA対応)|BringFlower](https://cdn-ak-scissors.b.st-hatena.com/image/square/f1be5fcc143dfe2dba4b187243d60e4b465861d6/height=288;version=1;width=512/https%3A%2F%2Fwww.bring-flower.com%2Fwp-content%2Fuploads%2F2022%2F03%2Faccordion-1.jpg)