This tutorial assembles a working accordion: a container paragraph, one paragraph per row, and the five switches that decide what is open when the page loads.
Two paragraph types, not one
Accordion is the container and Accordion Section is a single row. The container's section field accepts Accordion Section paragraphs only, which keeps the structure honest. Each row then needs an Accordion Section Title, which is the one required field here, plus an Accordion Section Body that will take any other bundle you have enabled.
The five behaviour controls
- Expand First Accordion Item opens row one immediately on load.
- Show Expand/Collapse All Button adds a plus and minus pair above the rows that opens or closes every one.
- Show Indicators places a small open and close marker on the right of each header.
- Animated Section picks one of six reveals: zoom, top, bottom, left, right or opacity.
- Opened Item Background chooses the header colour for whichever row is open, from the same palette of 30.
What the generated markup gives you
Every row header is a real button element inside a role="tablist" wrapper, with the body in a role="tabpanel". Because the header is a button rather than a styled div, it takes keyboard focus and fires on Enter or Space without any extra work. Open and closed state is carried by two classes the module swaps, so your theme can restyle either state.
The W3CSS Paragraphs module page shows how this bundle sits alongside the rest of the suite.
An accordion built from a View instead
Rows entered by hand are the right answer for an FAQ. For rows that come from existing content, Views Accordion does the same job from a View, though it needs Drupal 11.3 or above. This module's own info file allows Drupal 10, 11 and 12, which is why it is still the choice on a Drupal 10 site.
Would rather have this configured for you? That is Drupal development — or get in touch.
