Configure the layout and format of content and data presented to site visitors.

Views Tabs - Views Vanilla JavaScript Tabs (VVJT)

Views Vanilla JavaScript Tabs (VVJT) Screenshot

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 Tabs module (machine name: vvjt) is a versatile and lightweight Views style plugin designed to render items in tabs using vanilla JavaScript. This module enhances user experience by providing smooth and engaging tabbed navigation for content displayed through Drupal Views. It offers robust configuration options for tab positioning, animation, and responsiveness. In addition to the traditional use of tabs—whether vertical or horizontal, where users click on links to open tabs—this module also allows you to create a slideshow using image thumbnails instead of links. The thumbnails are scrollable and clickable, enabling users to view the corresponding image in a seamless and interactive way.

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.
  • Dynamic Animation Options: Choose from various animation types such as Top, Bottom, Left, Right, Zoom, and Opacity to create smooth transitions between tab panes, enhancing the visual appeal.
  • Unique ID Generation: Automatically generates a unique numeric ID for each view display to ensure consistency and prevent conflicts, making it easier to manage multiple tabbed interfaces.
  • Flexible Tab Positions: Configure tabs to be positioned at the top, right, bottom, or left, allowing for versatile layout options that suit different design needs.
  • Responsive Design with Custom Breakpoints: Define custom breakpoints for when vertical tabs should collapse into horizontal tabs, ensuring a responsive layout that adapts to various screen sizes and devices.
  • Configurable Maximum Width: Set a maximum width for tab buttons to ensure they expand based on content but do not exceed specified limits, maintaining a balanced and organized appearance.
  • Optional CSS Inclusion: Enable or disable the CSS library to style the tabs, providing control over the visual presentation of the tabbed content.
  • Adaptive Tab Wrapping: Option to wrap tab buttons when they exceed available space or use default auto-scroll, ensuring efficient navigation across different screen sizes.
  • Two Background Colors: Allows you to set two background colors—one for the buttons and another for the panes.
  • Disable Background Colors: Includes a checkbox to disable the background colors for both the buttons and the panes.

Views Accordion - Views Vanilla JavaScript Accordion (VVJA)

Views Vanilla JavaScript Accordion (VVJA) Screenshot

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.
  • First Item Expansion: Option to automatically expand the first section by default, improving initial user interaction. This can be controlled via the first_toggle option.
  • Exclusive Panel: Allow only one panel to be open at a time. By default, multiple panels can be open simultaneously. Note: This feature is incompatible with the "Show Collapse" or "Expand All (Global)" options.
  • Animation Effects: Smooth open and close animations with customizable transition speeds. These animations enhance user experience by providing visual feedback on interactions.
  • 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, and focus management, making the accordion accessible to all users, including those using screen readers.
  • CSS Customization: Easily customize the appearance of the accordion with optional CSS inclusion to match your site’s design.
  • Link Disabling: Prevents links within accordion headers from being clicked, ensuring the accordion's functionality is not disrupted.

Bootstrap Toolbox

Boostrap Toolbox is coming and will be available before the end of August.

Views Slideshow - Views Vanilla JavaScript Slideshow (VVJS)

Views Vanilla JavaScript Slideshow (VVJS) Screenshot

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 usin

Slider Layouts

The Slider Layouts module allows Drupal content editors to place carousel blocks via the layout builder.

Pages

Subscribe with RSS Subscribe to RSS - Content display