Accordions are a great way to organize certain types of content so that your visitors can find what they need quickly. But how do you make them accessible? And how do you make it easy to update in the block editor?
Let's put together a solid starting point for creating an accessible accordion that you can use anywhere.
Code: github.com/queerdevperson/ow-...
Example: overnightwebsite.com/faq/
Transcript: overnightwebsite.com/creating...
Part 2 - UX Improvements: • Creating an Accessible...
Additional improvements found in the GitHub repo:
- use the ACF javascript method instead
- use ul/li instead of div
- turn this into a plugin
Timestamps:
0:00 Intro
1:56 - Initial Approach
5:04 - New Approach
5:43 - The Custom Accordion Block
7:06 - Introduction to the Code
8:40 - The Basic Functions
9:36 - block.json
9:53 - Parent Block Markup
11:51 - Child Block Markup
18:27 - Important Styles
19:12 - The Javascript
23:01 - Finishing Up