Using the Accordion block for FAQs
FAQs are an important part of our websites, and now it is much easier to add and edit them. We use the Accordion block type, which can be added anywhere on any page or post.
To add an accordion, click the add block "[+]" icon, and type the first few letters of the word accordion.
The accordion comes in with with blank header text for the question and ghosted placeholder text for the answer:
Note: The thin blue line underneath denotes the end of the accordion block.
To begin, type or paste your FAQ question (Note: I highly recommend pasting from Notepad or a similar simple text editor for the question, as this particular element is prone to bringing in the formatting as text, which can be confusing).
After adding the text for the question, hit the tab key or click in the area where it now says "Start writing or type / to choose a block". You can add any block type here, including images, buttons, etc. Once satisfied, use the add block icon at lower right to add more accordion blocks. You may add as many as needed, and can separate sections by adding headings to break up related content.
Be sure to set the heading hierarchy of each accordion according to best practices – if an accordion is underneath an H2 heading, change the heading for each accordion to H3. They will be visually the same, but screen readers and search engines will be better able to understand the content.
Below is an example created using the Accordion block:
Faq question number one
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Faq question number two
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.