Modern Accordion Library for Vue, React & Vanilla JS – Prismium.js

Prismium.js is a simple yet powerful accordion system that creates beautiful, responsive, customizable accordions with support for Vue, React, and Vanilla JavaScript.

This library can help you build modern, collapsible content sections with a high degree of control over styling and animation. Ideal for FAQ sections, product filters, or multi-step forms.

Features:

• Eight Animation Effects: Line-by-line, fade-scale, slide, stagger, wave, flip, zoom, and cascade animations.
• Pre-built Themes: Nine built-in themes, including light, dark, forest, ocean, and sunset variations.
• Nested Accordion Support: Full support for multi-level accordion structures.
• Accessibility: ARIA compliance, RTL support, and visual impairment considerations.
• Modular Architecture: Import only the features you need to minimize bundle size.
• Useful API: Extensive event system and programmatic control methods.
• CSS Variable Theming: Easy customization through CSS custom properties.

How to use it:

1. Install and import the necessary modules into your project.

# NPM
$ npm install prismium

// Core
import Prismium from 'prismium';
// Stylesheet
import 'prismium/css';
// Optional theme
import 'prismium/theme/dark';
// Animations
import { EffectsModule } from 'prismium/modules';

// OR Include all features
import Prismium from 'prismium/bundle';
import 'prismium/css/bundle';

2. Or directly load the JavaScript and CSS files in your document.

<link rel="stylesheet" href="prismium-bundle.min.css">
<script type="module">
  import Prismium from './prismium-bundle.mjs'
</script>

3. The basic HTML structure for your accordion.

<div data-prismium-container>
  <!-- Accordion 1 -->
  <div data-prismium>
    <!-- Accordion Title/Toggle -->
    <button data-prismium-current>
      Accordion Title
      <!-- Optional toggle icon -->
      <svg data-prismium-icon>
        <use xlink:href="sprite.svg#chevron_bottom"></use>
      </svg>
    </button>
    <div data-prismium-content>
      Accordion Content
      <!-- Nested accordions here -->
      <div data-prismium>...</div>
    </div>
  </div>
  <!-- Accordion 2 -->
  <div data-prismium>...</div>
  <!-- Accordion 3 -->
  <div data-prismium>...</div>
  ...
</div>

4. Initialize the accordion with default options.

new Prismium('[data-prismium]', {
  // options here
});

5. All possible options to customize the accordion.

• init (boolean): If false, the instance is created but not initialized. You’ll need to call instance.init() manually. Default: true.
• opened (boolean): If true, the accordion will be open by default on page load. Default: false.
• disabled (boolean): If true, the accordion is non-interactive and cannot be opened or closed. Default: false.
• theme (string): Applies a pre-built theme. Options: clear, light, light-contrast, dark, dark-contrast, forest, ocean, sunset. Default: clear.
• speed (number): The duration of the open/close animation in milliseconds. Default: 350.
• autoClose (boolean): If true, opening one accordion will close its siblings within the same container. Default: false.
• autoCloseNested (boolean): If true, closing a parent accordion will also close all nested accordions inside it. Default: false.
• getParentHeight (boolean): A specific option for complex layouts where the parent’s height needs to be considered. Default: false.
• scrollTo (boolean): If true, the browser will scroll to the accordion when it opens. Default: false.
• spritePath (string): The path to your SVG sprite file. This is required for the icon-switching feature to work correctly. Example: 'sprite.svg'.
• iconAttribute (string): The data attribute used to identify the icon element. Default: 'data-prismium-icon'.
• containerSelectors (string[]): An array of selectors for parent containers. Default: ['[data-prismium-container]'].
• currentSelector (string): The selector for the accordion’s trigger button/header. Default: '[data-prismium-current]'.
• contentSelector (string): The selector for the direct wrapper of the content. Default: '[data-prismium-content]'.
• hiddenSelector (string): The selector for the element that hides/shows. Default: '[data-prismium-hidden]'.
• activeClass (string): The class added to the main element when the accordion is active (during animation). Default: 'prismium-active'.
• openedClass (string): The class added to the main element when the accordion is fully open. Default: 'prismium-opened'.
• disabledClass (string): The class added when the accordion is disabled. Default: 'prismium-disabled'.
• on (object): An object where keys are event names and values are callback functions. A convenient way to set up listeners at initialization.
• onAny (function): A single callback function that fires for all events.

new Prismium('[data-prismium]', {
  init: true,
  theme: 'clear',
  speed: 350,
  autoClose: false,
  autoCloseNested: false,
  getParentHeight: false,
  scrollTo: false,
  spritePath: 'sprite.svg',
  iconAttribute: 'data-prismium-icon',
  containerSelectors: ['[data-prismium-container]'],
  currentSelector: '[data-prismium-current]',
  contentSelector: '[data-prismium-content]',
  hiddenSelector: '[data-prismium-hidden]',
  activeClass: 'prismium-active',
  openedClass: 'prismium-opened',
  disabledClass: 'prismium-disabled',
  on: {
    // events here
  },
  onAny: (handler, priority) => {
    console.log(handler);
  }
});

6. Apply open/close animations when clicking the accordion title.

• line-by-line: Sequential element animation with configurable delay and transforms
• fade-scale: Opacity and scale transitions
• slide: Directional slide animations (up, down, left, right)
• stagger: Multi-directional staggered animations
• wave: Wave-based animation patterns
• flip: 3D flip transitions with perspective control
• zoom: Scale-based zoom effects with multiple origin points
• cascade: Cascading rotation and movement effects

new Prismium('[data-prismium]', {
  modules: [EffectsModule],
  effect: 'line-by-line',
  effectLineByLine: {
    speed: 350,
    easing: 'cubic-bezier(.25,.1,.25,1)',
    delay: 30,
    scale: 0.95,
    y: 30,
    x: 0,
    opacity: 0,
  },
});
new Prismium('[data-prismium]', {
  effect: 'fade-scale',
  effectFadeScale: {
    speed: 400,
    easing: 'cubic-bezier(.25,.1,.25,1)',
    scale: 0.9,
    opacity: 0,
  },
});
new Prismium('[data-prismium]', {
  effect: 'slide',
  effectSlide: {
    speed: 400,
    easing: 'cubic-bezier(.25,.1,.25,1)',
    direction: 'up',
    distance: 30,
    opacity: 0,
  },
});
new Prismium('[data-prismium]', {
  effect: 'stagger',
  effectStagger: {
    speed: 400,
    easing: 'cubic-bezier(.25,.1,.25,1)',
    delay: 50,
    directions: ['up', 'right', 'down', 'left'],
    distance: 30,
    opacity: 0,
  },
});
new Prismium('[data-prismium]', {
  effect: 'wave',
  effectWave: {
    speed: 400,
    easing: 'cubic-bezier(.25,.1,.25,1)',
    delay: 30,
    amplitude: 20,
    frequency: 2,
    opacity: 0,
  },
});
new Prismium('[data-prismium]', {
  effect: 'flip',
  effectFlip: {
    speed: 600,
    easing: 'cubic-bezier(.25,.1,.25,1)',
    delay: 50,
    perspective: 1000,
    rotation: 90,
    opacity: 0,
  },
});
new Prismium('[data-prismium]', {
  effect: 'zoom',
  effectZoom: {
    speed: 500,
    easing: 'cubic-bezier(0.34, 1.56, 0.64, 1)',
    delay: 50,
    scale: 0.1,
    opacity: 0,
    origins: [
      'top left',
      'top right',
      'bottom left',
      'bottom right',
      'center',
    ],
  },
});
new Prismium('[data-prismium]', {
  effect: 'cascade',
  effectCascade: {
    speed: 600,
    easing: 'cubic-bezier(0.34, 1.56, 0.64, 1)',
    delay: 100,
    rotation: 15,
    distance: 50,
    opacity: 0,
  },
});
new Prismium('[data-prismium]', {
  effect: 'custom',
  effectCustom: {
    speed: 400,
    delay: 100,
    setup: (prismium, child, index, total, isOpening) => {
      const speed = prismium.effect.speed;
      const delay = prismium.effect.delay;
      if (isOpening) {
        child.style.opacity = '0';
      } else {
        child.style.opacity = '1';
      }
      setTimeout(() => {
        child.style.transition = `all ${speed}ms ease ${index * delay}ms`;
      }, 0);
    },
    open: (prismium, child, index, total) => {
      child.style.opacity = '1';
    },
    close: (prismium, child, index, total) => {
      child.style.opacity = '0';
    },
    cleanup: (prismium, child, index, total, isOpening) => {
      child.style.removeProperty('opacity');
    },
  },
});

7. API methods.

• Prismium.init(el): Initializes a Prismium instance on a specific HTML element.
• Prismium.use(module): Registers a module, like EffectsModule, for all new instances.
• Prismium.getInstance(el | selector): Retrieves the Prismium instance associated with an element. You can also access it via element.prismium.
• Prismium.open(el | selector): Opens a specific accordion.
• Prismium.openAll(container, selector): Opens all accordions within a given container.
• Prismium.openEverything(selector): Opens all Prismium instances on the page.
• Prismium.toggle(el | selector): Toggles the state of a specific accordion.
• Prismium.close(el | selector): Closes a specific accordion.
• Prismium.closeAll(container, selector): Closes all accordions within a given container.
• Prismium.closeEverything(selector): Closes all Prismium instances on the page.
• Prismium.closeNested(el | selector): Closes all nested accordions within a specific parent accordion.
• Prismium.disable(el | selector): Disables an accordion, preventing user interaction and API calls.
• Prismium.enable(el | selector): Re-enables a disabled accordion.
• myAccordion.init(): Initializes the instance if init: false was set.
• myAccordion.destroy(): Removes all event listeners and cleans up the instance.
• myAccordion.setupSpeed(open, close): Sets different animation speeds for opening and closing.
• myAccordion.open(): Opens this specific accordion.
• myAccordion.close(): Closes this specific accordion.
• myAccordion.toggle(): Toggles the state of this accordion.
• myAccordion.on(event, handler): Attaches an event listener. You can pass a single event name or an array/space-separated string of names.
• myAccordion.once(event, handler): Attaches an event listener that only fires once.
• myAccordion.onAny(handler): Adds a listener that fires for every event.
• myAccordion.off(event, handler): Removes an event listener. If no handler is provided, it removes all listeners for that event.
• myAccordion.offAny(handler): Removes a specific handler for all events. If no handler is provided, it removes all “any” handlers.

8. Events.

• beforeInit: Fires just before the instance is initialized.
• init: Fires right after the instance has been initialized.
• beforeOpen: Fires before the opening animation starts.
• open: Fires when the opening animation begins.
• afterOpen: Fires immediately after the opening animation completes.
• beforeClose: Fires before the closing animation starts.
• close: Fires when the closing animation begins.
• afterClose: Fires immediately after the closing animation completes.
• beforeDestroy: Fires before the instance is destroyed.
• destroy: Fires when the instance is being destroyed.
• afterDestroy: Fires immediately after the instance is fully destroyed.
• effectStart: Fires when a special effect starts. Receives (prismium, direction) where direction is 'open' or 'close'.
• effectEnd: Fires when a special effect ends. Receives (prismium, direction).

Changelog:

v4.1.10 (11/19/2025)

• Added support both xlink:href and href attributes for SVG <use> tags in IconManager.

v4.1.9 (07/10/2025)

• Added support for the data-prismium-prevent selector to prevent interaction with the accordion.

v4.1.8 (07/10/2025)

• Fixed TypeScript typings to resolve import issues in Vue and React.