Views Accordion (VVJA) renders a Drupal Views listing as a collapsible accordion, with exclusive-panel mode, seven animation styles, deep-linkable panels and a full JavaScript API — built in vanilla JavaScript with no jQuery UI or Bootstrap dependency. It requires Drupal 11.3 or 12, and it is free on drupal.org.
What it does
VVJA adds a Views style plugin that turns each row of a view into one accordion panel: the first field becomes the clickable header, and every other field in the row becomes the content that expands underneath it. It is a genuine Views style plugin, so filters, sorting and the pager all work exactly as they would with any other display format.
Requirements
| Requirement | Value |
|---|---|
| Drupal core | ^11.3 || ^12 |
| PHP | 8.3 or later |
| Package | VVJ |
| Core module dependencies | Views, Filter |
| Contributed dependency | VVJ Core — required, installed automatically |
VVJA 2.x requires VVJ Core. composer require drupal/vvja:^2.0 installs it for you. If you install from a downloaded tarball rather than Composer, VVJ Core has to be downloaded and enabled separately — VVJA will not function without it, since it supplies the shared custom-element rendering and token resolver that VVJA's accordion behaviour is built on.
Setting up your view
Two things are non-negotiable for VVJA to work: Row style must be Fields, and you need at least two fields. The first field becomes the header — if it contains a link, VVJA disables the link's click behaviour via JavaScript so it does not fight with the panel toggle. Every remaining field renders inside the panel body when the header is clicked.
Behaviour and layout options
Toggle and expansion modes
Choose a single expand/collapse icon per panel, a global "expand all / collapse all" control, or both. Exclusive panel mode closes any open panel automatically when another is opened — note this is incompatible with the global toggle and "expand all", since those assume more than one panel can be open. Expand default controls what is open on page load: none, the first panel, or all of them.
Animation
Seven transition styles are available — none, slide from top, bottom, left or right, zoom, and fade — with a configurable transition speed from 0.1 (fast) to 2 seconds (slow). The default is 0.3s.
Expandable cards
Setting an Accordion Item Width in pixels turns the accordion into a grid of fixed-width, individually expandable cards rather than a single vertical stack — useful for product listings or portfolio grids where each item should read as a distinct block. Set the width to 0 for the traditional full-width accordion layout.
Deep linking
Enable deep linking and set a short URL identifier (for example, "faqs") to generate shareable links straight to a panel, such as #accordion-faqs-3. Clicking a panel updates the URL hash, opening that URL later opens the matching panel automatically, and browser back/forward navigation works as expected. Deep linking works with exclusive-panel and multi-panel modes alike.
Features
- No jQuery UI or Bootstrap dependency. Pure vanilla JavaScript.
- Custom SVG icons for both per-panel and global toggle buttons, sanitised against XSS on input.
- CSS custom properties for theming —
--vvja-grid-gap,--vvja-pane-padding,--vvja-transition-speed,--vvja-box-width— so you restyle without overriding selectors. - ARIA and accessibility support, including keyboard navigation with Arrow Up/Down, Home and End, and focus management.
- Focus trapping prevention. Focusable elements inside a collapsed panel automatically get
tabindex="-1"andaria-disabled="true", so keyboard users cannot tab into hidden content. - Responsive. Panel heights recalculate automatically on viewport resize.
- Unique ID generation so multiple accordions on one page never conflict.
Custom tokens for view header and footer
Views header and footer fields set to Global: Text area or Global: Unfiltered text with "Use replacement tokens from the first row" enabled cannot resolve standard {{ title }}-style tokens. Use VVJA's own syntax instead: [vvja:title], [vvja:field_image], and so on. Append :plain to strip HTML — [vvja:title:plain]. These pull directly from the rendered first row and do not support complex multi-token rewrites; use one token per field. In v2, resolution runs through the shared vvj_core.token_resolver service, with the same token syntax as v1.
JavaScript API
Control accordions from your own code through Drupal.vvja. The first argument is always your deep-link identifier:
Drupal.vvja.openPanel('faqs', 3);
Drupal.vvja.closePanel('faqs', 2);
Drupal.vvja.togglePanel('faqs', 1);
var openPanels = Drupal.vvja.getOpenPanels('faqs'); // e.g. [1, 3, 5]
var total = Drupal.vvja.getTotalPanels('faqs');
var instance = Drupal.vvja.getInstance('#vvja-12345'); // returns <vvja-accordion>Installation
composer require drupal/vvja
drush en vvja -y
drush crThen edit or create a view, set Row style to Fields with at least two fields, and under Format choose Views Vanilla JavaScript Accordion as the style.
Developer and site builder tips
- Every view using this plugin carries the CSS class
vvj-accordionalongside Views' ownjs-view-dom-id. - Open panels get the class
opened; closed panels getclosed. - Each row is wrapped in a
<div>containing a button (.button.vvja-button) and a pane (.vvja-pane). - Data attributes on the container —
data-animation,data-unique-id,data-exclusive-panel,data-deeplink-enabled,data-deeplink-id— are useful hooks for CSS targeting or your own JavaScript. - To use more than one field as the header, mark the extra fields "Exclude from display" and combine them with a Custom Global Field (Text) using Views' replacement patterns, ordered before the visible fields.
- The Grouping Field feature in Views is not supported and should be avoided on a view using this style.
Accordion or something else?
An accordion is the right pattern when visitors should scan headings first and open only what interests them — FAQs, specifications, policy sections. If you want content on constant display without a click, or a rotating showcase instead, Views 3D Carousel and Views Carousel are built for that. If you want a front/back flip reveal instead of vertical expansion, see Views 3D FlipBox. All four share the same VVJ Core foundation, so mixing them on one site adds no extra dependency weight beyond the one shared module.
Common questions
Can only one panel be open at a time?
Yes, with Exclusive Panel mode enabled — opening a new panel automatically closes any other open one. It cannot be combined with the global toggle or "expand all", since both of those assume multiple panels can stay open.
Does VVJA need jQuery?
No. It is vanilla JavaScript and does not need jQuery UI, Bootstrap, or any other front-end library. It does depend on Drupal core's Views and Filter modules, and on VVJ Core.
Will VVJA work on Drupal 12?
Yes. It declares core_version_requirement: ^11.3 || ^12 and PHP 8.3 or later.
Can I link directly to one panel?
Yes, with deep linking enabled and a URL identifier set. Links look like #accordion-faqs-3 and work with browser back/forward navigation.
Can I use my own icons?
Yes. Provide custom SVG markup for both the per-panel toggle icons and the global expand/collapse buttons; all SVG input is sanitised against XSS.
Need a hand?
VVJA is free and GPL-licensed, like all my contributed work. If you want an accordion styled to match an existing design, a build that goes beyond what Format Settings expose, or a Drupal 10 to 11/12 upgrade so you can run version 2, that is my day job.
Read about my Drupal services, see what a Drupal developer brings to a project, or get in touch.
