素のJavaScriptでアコーディオンメニューを作る（クリックで開閉・jQueryなし・WAI-ARIA対応）｜BringFlowerクリックで開閉するアコーディオンメニューを素のJavaScript（Vanilla JS）で制作する方法を解説します。ここでご紹介する内容は、他のサイトで紹介されているコートだと達成したい仕様が満たされなかったり、実装の仕方が悪いのか挙動がおかしかったりしたので、自作したものです。 使いまわしもしやすいコードで使いやすいものになっていると思いますので、ぜひご活用ください。 またウェブアクセシビリティのためのWAI-ARIAも対応しています。 実装結果デモ まずは実装した結果をご確認ください。 後述する仕様のうち、アコーディオンを開いた時にスクロールを許容する部分はスクロールバーが存在するCODEPENだと表現が難しかったので、その点は別途ご自分でご確認いただければと思います。 See the Pen Accordion by Takahiro Inada (@tkhr1) on CodeP
