1. Docs
  2. Toggler

Action Toggler

function provides more flexibility and can be used for various toggle scenarios beyond navigation.

The actionToggler function creates a toggle mechanism that can change the attributes of multiple target elements when a trigger element is clicked.

Purpose

  • To create interactive UI elements that can toggle between two states
  • To apply different attributes to target elements based on the toggle state
  • To provide a callback function that runs on each toggle action

Usage 

import { actionToggler } from './path-to-file';

actionToggler({
  trigger: '#toggleButton',
  targets: [
    {
      element: '#target1',
      attributes: {
        initial: { 'aria-hidden': 'true', class: 'hidden' },
        to: { 'aria-hidden': 'false', class: 'visible' }
      }
    },
    {
      element: '#target2',
      attributes: {
        initial: { class: 'bg-red' },
        to: { class: 'bg-blue' }
      }
    }
  ],
  onToggle: ({ isExpanded }) => {
    console.log('Toggle state:', isExpanded);
  }
});

Behavior

  • On initialization, it applies the initial attributes to all target elements
  • When the trigger is clicked, it toggles between initial and to attributes for all targets
  • It updates the aria-expanded attribute of the trigger element
  • It calls the onToggle callback (if provided) with the current toggle state

Parameters

The actionToggler function accepts an options object with the following properties:
  • trigger: A string selector or HTMLElement that triggers the toggle action when clicked
  • targets: An array of target objects, each containing:
    • element: A string selector or HTMLElement to be toggled
    • attributes: An object with initial and to states, each containing attribute key-value pairs
  • onToggle: (Optional) A callback function that receives the current toggle state