This tutorial gets you to a working accordion where each collapsible section is its own paragraph, and you decide which one is open when the page loads.
Two paragraph types, not one
Enabling paragraph_bundle_accordion creates Accordion (accordion_bundle) and Accordion Section (accordion_section_bundle). The parent holds a field called Accordion Section that accepts nothing but section paragraphs; each section has Accordion Title Section and Accordion Body Section. Reordering the sections in the paragraph widget reorders the accordion.
The Display tab choices in the recording
- Expand First Accordion Item — unfolds the first section on load.
- Show Collapse or Expand All — adds a single control above the list.
- Show Indicators — the plus sign that turns into a minus as a section opens.
- Animated Section — zoom, top, bottom, left, right or opacity.
- Opened Item Background — the button colour used while a section is open.
How it behaves for keyboard and screen reader users
Each header button exposes aria-expanded and aria-controls; each panel is a role="region" labelled by its own button. The stylesheet respects prefers-reduced-motion. The behaviour is plain JavaScript on core/drupal and core/once — the slide helper is written specifically to animate without jQuery.
Which Drupal version you need
Paragraphs Bundles requires Drupal 11.3 or Drupal 12; that is what the info file declares, and Drupal 10 is not in the list. If your site is still on Drupal 10, the accordion you want is in W3CSS Paragraphs, which supports 10, 11 and 12.
On 11.3 or 12, enable the accordion sub-module from the Paragraphs Bundles module page and add the field to one content type first.
Need this built into your own site? See Drupal development services, or request a quote.
