Accordion – PC Custom Blocks
Overview
The Accordion Block allows disclosure triangles on headings, to toggle an adjacent text box open and closed. A bit of JavaScript hides any links in the text box, when closed, from the DOM, to ensure accessibility compliance. IMPORTANT NOTE: Do not copy and paste accordion items to duplicate them. When creating new Accordion items, always create a new, fresh item. If you copy and paste/reuse accordion items, the opening and closing of the items will not work properly, because each item needs a unique identifier. WordPress automatically assigns a unique identifier when you create a new accordion item. If you copy and paste items, you will also be copying and pasting the unique identifiers, which will no longer be unique.
What does it look like?
My great accordion item
I can add some content to the accordion item, which is revealed when you click on it!
Another great accordion item
I’d like to think that this one is just as good as the first one!
When should I use it?
When you have a design-focused page that should have scannable FAQ-like information with brief and then expanded topics.
Is there anything else I should know about this block?
- Accordion items don’t have any space below them, so you may want to add a Spacer block after the last Accordion item in a list.
- You can use images, links, and lists inside the hidden part of your Accordion block.
- Accordion items take up the full width of the space they have available to them. If you wish to shorten the width of your Accordion blocks, you can wrap them in a Columns block.
- The retired legacy Accordion block
