vvja

The Vanilla Views suite F.L.A.S.H.C.R.P.T.B FlashCrptb is a collection of ten powerful Drupal modules designed to enhance the visual and interactive experience of Drupal Views using pure, lightweight Vanilla JavaScript. Originally developed as Paragraphs Bundles, these modules Accordion, Basic Carousel, 3D Carousel, 3D FlipBox, Hero, Lightbox, Parallax, Reveal, Slideshow, and Tabs.

Additionally, I have created a demo for each module: Accordion Demo, 3D Carousel Demo, Carousel Demo, 3D FlipBox Demo, Hero Demo, Lightbox Demo, Parallax Demo, Reveal Demo, Slideshow Demo, and Tabs Demo.

To get started, check out our Video Demo for a step-by-step guide on using the module effectively. Explore our mixed demos here: Live Demo One | Live Demo Two. The site for the live demo is built with the Solo Theme.

Overview

The Views Vanilla JavaScript Accordion module (machine name: vvja) is a versatile and lightweight Views style plugin designed to render items in an accordion format using vanilla JavaScript. This module enhances the user experience by providing smooth, collapsible navigation for content displayed through Drupal Views, eliminating the need for external JavaScript libraries like jQuery UI or Bootstrap.

Features

• No jQuery: By using vanilla JavaScript, the module ensures faster performance, reduced page load times, and no reliance on heavy external libraries. This makes it an ideal choice for modern, lightweight Drupal websites.
• Toggle Options: Choose between single toggle indicators for each section or a global toggle for expanding/collapsing all sections at once. These toggles are dynamically updated based on the accordion's state.
• Expansion Modes: Control which panels are open on page load: none (all collapsed), first panel only, or all panels expanded. This is controlled via the expand_default option.
• Exclusive Panel: Allow only one panel to be open at a time. When a user opens a new panel, any currently open panel is automatically closed. Note: This feature is incompatible with the "Global Toggle" and "Expand All" options.
• Animation Effects: Choose from seven animation styles: None, Slide from Top, Slide from Bottom, Slide from Left, Slide from Right, Zoom, and Fade. Configurable transition speed from 0.1s (fast) to 2s (slow).
• Layout Controls: Fine-tune the spacing between panels (panel_gap) and the inner padding of panel content areas (pane_padding), both configurable in pixels.
• Custom SVG Icons: Replace the default expand/collapse icons with your own custom SVG markup, for both individual panel toggles and the global expand/collapse all buttons. All SVG input is sanitized for XSS protection.
• Deep Linking: Enable shareable URLs that link directly to specific accordion panels. Set a custom URL identifier (e.g., "faqs") to create links like #accordion-faqs-3. Supports browser back/forward navigation.
• JavaScript API: Control accordions programmatically from your own JavaScript via Drupal.vvja. Open, close, or toggle panels, get a list of open panels, and access accordion instances.
• Custom Token System: Use [vvja:FIELD_NAME] tokens in Views headers and footers to display field values from the first row. Append :plain for plain text output.
• CSS Custom Properties: Theming via CSS variables (--vvja-grid-gap, --vvja-pane-padding, --vvja-transition-speed, --vvja-box-width) for easy customization without overriding selectors.
• Unique ID Generation: Automatically generates a unique numeric ID for each view display to ensure consistency and prevent conflicts.
• ARIA and Accessibility Support: Includes proper ARIA roles and attributes, keyboard navigation (Arrow Up/Down, Home, End), focus management, and automatic disabling of focusable elements in hidden panels.
• CSS Customization: Easily customize the appearance of the accordion with optional CSS inclusion to match your site's design. Disable the default stylesheet to use your own.
• Responsive: Automatically recalculates panel heights on viewport resize for consistent behavior across devices.
• Link Disabling: Prevents links within accordion headers from being clicked, ensuring the accordion's functionality is not disrupted.

Introducing Expandable Cards for Your Accordion Layout

The "Expandable Cards" feature brings a modern and flexible way to display content within your accordion layout. Designed to enhance user experience and improve content presentation, this feature allows you to define fixed-width cards that can be expanded individually, creating a visually appealing, card-like interface.

Key Features:

• Flexible Card Width: Specify the width of each accordion item in pixels to create uniform, card-style layouts. This is perfect for showcasing content in a structured, grid-like format where each item is clearly delineated.
• Full-Width Expansion: Set the card width to 0 to enable full-width expansion, turning your accordion into a traditional layout where each item occupies the entire available width. This is ideal for more content-heavy presentations where readability and space utilization are key.
• Seamless Transition: Whether in card or full-width mode, transitions between open and closed states are smooth and visually appealing, ensuring that your users have a consistent experience across different devices and screen sizes.
• Easy Configuration: This feature is fully configurable through the module's settings. Simply adjust the "Accordion Item Width" option in pixels to switch between card and full-width layouts. The intuitive settings panel makes it easy to toggle this feature on or off, giving you full control over the look and feel of your content.

Use Cases:

• Product Listings: Perfect for e-commerce sites where you want to display products in a grid format with expandable details.
• FAQs: Create a card-style FAQ section where each question can be expanded to reveal the answer.
• Portfolio Display: Showcase portfolio items in a clean, organized manner, with the ability to expand each item for more details.
• Content Hubs: Ideal for content-rich pages where you want to balance between structured layouts and detailed content.

Getting Started:

1. Install the Module: Ensure you have the latest version of the module installed.
2. Configure Accordion Item Width: Navigate to the module settings and set the "Accordion Item Width" to your desired pixel value.
3. Set to Zero for Full-Width: If you prefer a traditional accordion layout, simply set the width to 0, and the accordion items will expand to fill the available space.
4. Enjoy the Flexibility: Whether you choose to display content as cards or in a full-width layout, the "Expandable Cards" feature adapts to your needs, offering flexibility and improved content presentation.

Conclusion:

The "Expandable Cards" feature is a powerful enhancement that brings a modern, card-based approach to the traditional accordion layout. Whether you're building a portfolio, an FAQ section, or a product listing, this feature offers the flexibility and visual appeal needed to make your content stand out. Explore the possibilities with "Expandable Cards" and elevate your site's design and user experience.

Accessibility

The VVJA module includes several accessibility features to ensure that your accordion is usable by all visitors, including those using screen readers. Features include:

• ARIA Roles and Properties: Proper ARIA roles and properties are used to provide context and state information to screen readers.
• Keyboard Navigation: Users can navigate through accordion sections using keyboard shortcuts (Arrow Up/Down, Home, End), ensuring full functionality without a mouse.
• Focus Management: Ensures that the currently displayed section is focused, providing a better experience for keyboard and screen reader users.

Configuration

After installing and enabling the module, you can configure it through the Views UI. The settings are organized into the following sections:

Behavior Settings

1. Single Toggle: Show individual expand/collapse icons on each panel button.
2. Global Toggle: Show an "Expand All / Collapse All" button above the accordion.
3. Exclusive Panel: Only one panel can be open at a time. Incompatible with Global Toggle and Expand All.
4. Expand Default: Choose which panels are open on page load: None, First, or All.

Animation Settings

1. Animation Type: Choose the animation effect for panel transitions. Options: None, Slide from Top, Bottom, Left, Right, Zoom, and Fade.
2. Transition Speed: Enter a value between 0.1 (fast) and 2 (slow) seconds to control the animation speed. Default: 0.3s.

Layout Settings

1. Accordion Item Width: Set the width of each accordion item in pixels for card-style layouts. Set to 0 for full-width (default).
2. Content Padding: Set the inner padding of panel content areas in pixels. Default: 16px.
3. Panel Gap: Set the spacing between accordion panels in pixels. Default: 16px.

Custom Icons

1. Panel Expand/Collapse Icons: Provide custom SVG markup for the expand and collapse icons on each panel button.
2. Global Expand/Collapse All Icons: Provide custom SVG markup for the global toggle button icons.

Deep Linking Settings

1. Enable Deep Linking: Generate shareable URLs with hash fragments that link directly to specific panels.
2. URL Identifier: A short identifier used in the URL hash (e.g., "faqs" produces #accordion-faqs-3). Must start with a letter, lowercase, max 20 characters.

Advanced Options

1. Enable CSS: Optionally include the default VVJA stylesheet. Disable this to use your own CSS exclusively.

Custom Token for views header/footer from first row

In Views header/footer, if you add a field using Global: Text area or Global: Unfiltered text, there is an option called "Use replacement tokens from the first row."
The default tokens will not work in this case. Please use the custom tokens created by VVJA instead.
For example:

• The default token {{ title }} should be replaced with [vvja:title].
• The default token {{ field_image }} should be replaced with [vvja:field_image].

You can append :plain to the token to strip any HTML.

Example: [vvja:title:plain]

Note: The [vvja:*] tokens pull data directly from the rendered View fields.
Fields using complex rewrites (e.g., Global: Custom text with {{ tokens }}) are not supported by default for token replacement. Please use individual field tokens like [vvja:title], [vvja:field_image], etc.

Deep Linking

Enable deep linking in your accordion's Format Settings to create shareable URLs for specific panels.

Setup:

1. Enable Deep Linking in Format Settings.
2. Set URL Identifier (e.g., "faqs").
3. Accordion panel links become: #accordion-faqs-3.

Deep linking works with all accordion configurations, including exclusive and multi-panel modes. Clicking a panel updates the URL hash, and navigating to a URL with a hash automatically opens the corresponding panel. Browser back/forward navigation is fully supported.

JavaScript API

Control accordions programmatically from your own JavaScript code using the Drupal.vvja namespace. The first argument is your deep link identifier.

Open a specific panel:

Drupal.vvja.openPanel('faqs', 3);

Close a specific panel:

Drupal.vvja.closePanel('faqs', 2);

Toggle a specific panel:

Drupal.vvja.togglePanel('faqs', 1);

Get open panels:

var openPanels = Drupal.vvja.getOpenPanels('faqs');
// Returns array like [1, 3, 5]

Get total panels:

var total = Drupal.vvja.getTotalPanels('faqs');

Access accordion instance:

var instance = Drupal.vvja.getInstance('#vvja-12345');

Complete Example: Custom Panel Control

Drupal.behaviors.myCustomAccordion = {
  attach: function(context, settings) {
    var openAllBtn = once('open-all', '.my-open-all-button', context)[0];
    if (openAllBtn) {
      openAllBtn.addEventListener('click', function() {
        var total = Drupal.vvja.getTotalPanels('faqs');
        for (var i = 1; i <= total; i++) {
          Drupal.vvja.openPanel('faqs', i);
        }
      });
    }
  }
};

Example Usage

1. Create a new view or edit an existing view.
2. Under the "Format" section, select "Views Vanilla JavaScript Accordion" as the style.
3. Configure the toggle settings, animation type, and CSS options as needed.
4. Save the view and see the accordion navigation in action on the front end.

Additional Information

• Dependencies: This module has no dependencies on other contributed modules.
• Compatibility: Fully compatible with Drupal 10 and Drupal 11.

Installation

1. Download and install the VVJA module from Drupal.org:
   

   composer require drupal/vvja

2. Enable the module through the Drupal admin interface or using Drush:
   

   drush en vvja

3. Clear caches to ensure the new plugin is available:
   

   drush cr

This module includes a default CSS stylesheet that can be disabled through the options. For your convenience, the following files are included:

Requirements for Your View

• Row Style: Must be set to Fields.
• Fields: Provide at least two fields to display.
• Style Configuration: Choose "Views Accordion" in the Style dialog within your view, which will prompt you to configure the following options:
  • Transition Time: Specifies how long the opening and closing of sections should last, in seconds. The default is half a second.
  • Start with First Row Opened: Determines whether the first row of the view should be opened initially when the view is displayed. Uncheck this if you prefer the accordion to start closed.
  • Use Default Styling: If unchecked, the CSS file (views-accordion.css) in the module's directory will not be loaded. Disable this option if you plan to apply your own CSS styling.

Important: The first field will be used as the header for each accordion section, while all other fields will be displayed when the header is clicked. The module creates an accordion section for each row of results from the view. If the first field contains a link, the link will be disabled (via JavaScript), ensuring that nothing breaks.

Support

For issues, feature requests, and general support, please use the issue queue on Drupal.org.

Accordion - Developer & Site Builder Tips:

• Every view created with this plugin has a CSS class vvj-accordion placed alongside js-view-dom-id.
• Dynamic CSS classes: Open panes have the class opened, and closed panes have the class closed.
• You must choose "Row Style" as the format, with at least two fields.
• The first field should not be clickable. If this is forgotten, the module includes a fallback to disable any links.
• The first field can be an image. If the image has an alt attribute, it is copied to the button for accessibility.
• Each accordion row is wrapped in a <div> containing a button (.button .vvja-button) and a pane (.vvja-pane).
• The single toggle is wrapped in its own <span>, while the global toggle is wrapped in its own <div>.
• CSS custom properties are available for theming: --vvja-grid-gap, --vvja-pane-padding, --vvja-transition-speed, and --vvja-box-width.
• Data attributes on the accordion container (data-animation, data-unique-id, data-exclusive-panel, data-deeplink-enabled, data-deeplink-id, etc.) can be used for CSS targeting or JavaScript integration.
• Focusable elements (links, buttons, inputs) inside hidden panes are automatically disabled (tabindex="-1", aria-disabled="true") to prevent keyboard trapping.

How to Configure Multiple Fields as the Button or Front Card in Views Display

My contrib modules for Drupal Views Plugin Display, such as Accordion, Tabs, Reveal, and 3D FlipBox, allow for dynamic content display based on the first field in your view. By default, the first field selected in the view configuration is used as the button or front card. However, if you wish to utilize more than one field as the "first field" for the button or front card, follow these steps:

Step-by-Step Instructions:

1. Add Desired Fields: In your Views configuration, add all the fields you want to use as the button or front card.
2. Exclude from Display: For each of these fields, mark them as "Exclude from display". This ensures that these fields are available for use but are not directly shown in the final output.
3. Create a Custom Global Field:
   • Add a Custom Global Field (Text) to your view.
   • Use the Replacement Patterns feature to insert tokens for the fields you've excluded from the display. This allows you to combine multiple fields into one single output.

Field Ordering Guidance:

• Arrange the fields in your view so that the hidden fields (the ones excluded from display) come first.
• Follow the hidden fields with the custom global field that will act as the button or front card.
• After these fields, add any remaining fields that will make up the rest of your content.

By following these steps and arranging your fields in this order, you can use multiple fields as the first field for your button or front card, offering greater flexibility and customization in your Drupal Views displays.

Module Limitation Notice: Grouping Field Feature

Please note that the current version of this module does not support the
Grouping Field feature available in Drupal Views. The
"Grouping Field" option allows you to group records by a specified field,
but this functionality is not compatible with the module's current implementation.

We recommend avoiding the use of this feature with this module to ensure
proper functionality and display of your Views.

back to top ☝️

Developed & Designed By: Alaa Haddad

A Personal Thank You for Your Support

Every project you see here, including this one, reflects countless hours of work driven by my passion for making Drupal better for everyone. Your support truly makes a difference, and there are a few simple ways you can help these projects grow and reach others who might benefit:

• Use & Share Feedback: Have you found this project (or any of my other work) helpful? Let me know what worked well or how it could be improved. Real user input drives better tools for the entire community.
• Click "Like" on Drupal.org: It may seem small, but liking this project on Drupal.org helps others discover and trust these tools.
• Spread the Word: Share these projects on social media, Slack groups, or anywhere Drupal folks connect. Your word of mouth helps these tools find the people who need them.
• Explore More of My Work: Check out my other projects on Drupal.org to see what else might support your workflow or inspire your next build.

W3CSS Theme (d8w3css) - Solo - W3CSS Paragraphs - Paragraphs Bundles - Amun - Amunet - Anhur - Acquia Purge Varnish - Cloudflare Purge - Reference Blocked Users - Solo Copy Blocks - Solo Utilities - PB Import - VVJA - Accordion - VVJC - 3D Carousel - VVJB - Basic Carousel - VVJF - 3D FlipBox - VVJH - Hero - VVJL - Lightbox - VVJP - Parallax - VVJR - Reveal - VVJS - Slideshow - VVJT - Tabs - Module Matrix - Selectify - Utilikit

If you have any questions, ideas, or feedback about my Drupal.org projects, I’d love to hear from you! To keep things open and helpful for the entire community, I encourage you to post directly in the project's issue queue on Drupal.org. This way, your questions and the answers can benefit others who may have the same needs.

At the end of the day, my goal is to make Drupal easier and more enjoyable for everyone, especially small businesses and site builders who want to create professional sites without extra hassle. Together, we can build something even better. Thank you for your support, and for being part of this journey!