After watching, you can publish a collapsible accordion from a Drupal View and control it from your own JavaScript.
Behaviour first, styling second
The Behavior Settings group is where the accordion's personality is decided, and the four options interact:
- Show Collapse or Expand (Single) puts an icon on each panel.
- Show Collapse or Expand All (Global) adds one button above the whole accordion.
- Enable Exclusive Mode keeps exactly one panel open at a time — and is incompatible with the global toggle and with expanding everything by default.
- Default Expand Behavior decides what is open on page load: none, the first panel, or all of them.
Spacing, speed and icons
Animation Settings holds the animation preset and Transition Speed, which runs from 0.1 to 2 seconds and defaults to 0.3. Layout Settings holds three numbers: Expandable Card Width (px), which turns panels into fixed-width cards when it is above zero, plus Content Padding (px) and Panel Gap (px), both 16 by default. Under Custom Icons you can paste your own SVG markup for the panel toggles and the expand-all button; the pasted SVG is run through an allowlist sanitiser before it is ever rendered.
Driving it from code
The module exposes a small public API on Drupal.vvja — openPanel, closePanel, togglePanel, getOpenPanels, getTotalPanels and getInstance — addressed by the deep-link identifier you set. So a marketing "expand everything" button on the page can loop from one to getTotalPanels and open each one, without touching the module.
Screen readers and the keyboard
Arrow Up and Down, Home and End move between headers; only one button sits in the tab order at a time; and links, buttons and inputs inside a closed panel are given tabindex="-1" so the keyboard cannot fall into a panel nobody can see.
Compatibility
Declared in vvja.info.yml: core_version_requirement: ^11.3 || ^12, php: 8.3, and dependencies on Views, Filter and VVJ Core.
Next
Full documentation on the Views Accordion module page, and for announcing state changes well, see Implementing ARIA Live Regions.
If this is one piece of a bigger build, Drupal architecture services is where that conversation starts — or get in touch.
