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.