togglefy

Togglefy is designed to add interactivity to web pages by toggling the classes of specified elements.

400B gzipped

Demo

➤ Install

yarn add togglefy

➤ Import

import Togglefy from 'togglefy';

➤ Usage

const togglefy = new Togglefy({
  targetSelector: '.target',
  triggerSelector: '.trigger',
  toggleClassName: 'toggle',
  exclusive: false,
});

togglefy.init();

➤ Options

| Option | Type | Default | Description | |:------------------|:-------------------------:|:----------:|:--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | targetSelector | String | HTMLElement | .target | Selector of target elements, whose classes will be switched when the trigger is fired. It can be any valid CSS selector. If HTMLElement is passed, it is used, otherwise the elements are searched by the passed selector. | | triggerSelector | String | HTMLElement | .trigger | Selector of elements-triggers, when clicking on which will switch the class of the target elements. Just like targetSelector, it can be any valid CSS selector. | | toggleClassName | String | toggle | The name of the class that will be added and removed from the target elements when the trigger is fired. This allows you to control the styling of element state via CSS. | | exclusive | Boolean | false | A logical value indicating the exclusivity of class switching. If set to true, when a class is switched on one element, that class will be removed from all other target elements, ensuring that the class is only applied to one element at the time. This is useful when you only want one element on the page to have an active state. The default value is false, which allows the class to be applied to multiple elements at the same time. |

➤ License

togglefy is released under MIT license.