Views Reveal turns each row in a Drupal View into a two-sided card: a front face shown by default, and a back face that slides, fades or zooms into view on hover or click. It is a Views style plugin — machine name vvjr — built in vanilla JavaScript, with no jQuery and no front-end framework to load.
What a reveal card is actually for
A reveal card is not a slideshow and not a carousel — it is a way to put a second layer of content behind a first one, disclosed only when a visitor asks for it. That makes it the right tool for a narrower set of jobs than its siblings in this suite:
- Staff or team directories — a photo and name on the front, a bio and contact links on the back.
- Feature or service call-outs — an icon and headline on the front, the supporting detail on the back.
- Before/after or comparison pairs — one state visible, the other revealed on interaction.
If you need visitors to click through a sequence of items, that is Views Slideshow or a carousel. If you need several panes selected by a label, that is Views Tabs. Reveal is specifically for one card with two states.
Requirements
| Requirement | Value |
|---|---|
| Drupal core | ^11.3 || ^12 |
| PHP | 8.3+ |
| Core modules | Views, Filter |
| Contributed dependency | VVJ Core — required by every VVJ v2 module, and pulled in automatically by Composer |
Note the version floor: Views Reveal 2.x requires Drupal 11.3 or later, or Drupal 12. There is no Drupal 10 path on the 2.x branch — if you are still on Drupal 10, install the 1.x series instead, and if that version gap is what is holding your site back, upgrading Drupal is work I do.
How the card is built
Reveal reads its row exactly once and splits it into two faces. Set the view's row style to Fields with at least two fields:
- The first field becomes the front face. It can be any field type, and it should not be a link — the module disables any link on the front face automatically as a fallback, but it is cleaner to avoid one in the first place.
- Every field after the first becomes the back face, shown when the card is revealed.
Every view rendered with this display style carries the CSS class vvj-reveal alongside Drupal's standard js-view-dom-id, and the revealed state adds a revealed class to the card. On hover, links inside the front face are disabled while links in the back face stay active; on click, links in both faces are disabled while the card is open, then re-enabled if the card collapses again on a small screen.
Configuration
| Setting | Controls |
|---|---|
| Reveal method | Trigger the back face on hover or on click |
| Reveal style | Animation direction — fade, zoom, or slide from top, right, bottom or left |
| Reveal speed | Animation duration, from fast to slow |
| Animation easing | The easing curve applied to the reveal transition |
| Box height / box width | Fixed height and minimum width for each card, in pixels |
| Grid gap | Spacing between cards, in pixels |
| Front / back background color | Independent background colors for the two faces |
| Available breakpoints | Which of the standard breakpoints (576–1400px) the responsive grid should honor |
| Enable CSS library | Turn the shipped stylesheet on or off for full custom styling |
On small screens, a revealed card collapses into a regular stacked card rather than trying to hold the hover interaction — there is no good way to "hover" on a touchscreen, so Reveal does not pretend otherwise.
Accessibility
Reveal ships with ARIA roles and state properties on the card and its two faces, full keyboard operation so a reveal can be triggered and read without a mouse, and focus management that moves focus to the revealed content when it opens. None of this needs configuration; it is the default behavior of the plugin.
Custom tokens in Views header and footer
If you add a Global: Text area or Global: Unfiltered text field to a view's header or footer and turn on "Use replacement tokens from the first row," Drupal's default {{ field_name }} tokens will not resolve. Use the tokens Reveal provides instead:
{{ title }} becomes [vvjr:title]
{{ field_image }} becomes [vvjr:field_image]Append :plain to strip HTML from the resolved value — [vvjr:title:plain]. These tokens pull directly from the rendered row fields, so a field using a complex rewrite with embedded {{ tokens }} is not supported; reference the individual field instead. In v2, token resolution runs through the shared vvj_core.token_resolver service, but the [vvjr:field] syntax itself is unchanged from v1.
Installation
composer require drupal/vvjr
drush en vvjr -y
drush crComposer pulls in VVJ Core automatically. Then open the view you want to change, set the format to Reveal, and configure it under Format Settings.
Using more than one field as the front face
The front face reads from a single field by default, but you can combine several: add the fields you need, mark each one "Exclude from display" so it is available without being rendered directly, then add a Custom Global Field (Text) that uses Views' replacement-pattern tokens to combine them. Order the excluded fields first, the custom global field second, and the remaining visible fields after that — the custom field then becomes the effective front face.
A known limitation
Reveal does not support the Views Grouping Field feature. Grouping records by a field is not compatible with the current row-splitting implementation, so avoid combining the two.
Common questions
Can the front face be an image and the back face be text?
Yes — the front field can be any field type, and every field added after it renders on the back face, in the order you add them.
Does Reveal work on touchscreens?
Yes. Set the reveal method to click rather than hover for the most reliable touch behavior, and the card collapses to a regular stacked layout below your configured breakpoint.
Will it install on a Drupal 10 site?
No — 2.x requires Drupal 11.3 or later, or Drupal 12. Use the 1.x branch on Drupal 10.
Do I need to install VVJ Core separately?
No. It is a required dependency, and composer require drupal/vvjr installs it for you automatically.
Can I use Reveal without the shipped CSS?
Yes — the "Enable CSS library" setting turns the default stylesheet off if you want to style the card yourself.
Related modules
Reveal is one of ten Views display styles I maintain in the same suite. Views Tabs and Views Slideshow solve adjacent problems — a tabbed pane and a sequential slide, respectively — and all three share the VVJ Core foundation. If your content is built from Paragraphs Bundles, the Reveal paragraph type uses the same front/back pattern without a view.
Need it built into a real site?
Views Reveal is free and GPL-licensed. If you want a directory, feature grid or comparison layout built around it — or a Drupal 10 to 11/12 upgrade so you can run the 2.x branch — that is my day job. Read about my Drupal services, see what a Drupal developer handles day to day, or get in touch.
