Tiny UI Toggle - Toggle the state of a UI element to easily create components e.g. collapse, accordion, tabs, dropdown, dialog/modal.

Collapse

Details element

Accordion

Accordion toggle 1

Accordion toggle 2

Accordion toggle 3

Tabs

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit.

Dropdown

Dialog/Modal

Target button or panel independently

Installation

$ npm install tiny-ui-toggle --save-dev

Usage

Import JS

The script is an ES module but the compiled version is included in the build as "src/scripts/tiny-ui-toggle-umd.js". You can also copy "src/scripts/tiny-ui-toggle.js" into your own site if your build process can accommodate ES modules.

import { Toggle, toggleAutoInit } from 'tiny-ui-toggle.js';

// Initialize all elements with default options, these can be overridden by reinitializing or by data attributes on the element
toggleAutoInit();

// Initialize all elements manually which allows you to pass in custom options
const toggleElements = document.querySelectorAll('.toggle');
for (const item of toggleElements) {
  Toggle({ selector: item });
};

// Init with string - default setup for one instance
const toggleDefault = Toggle({ selector: '.toggle' });

Options

The options can be set via initialization in the JS or by data attributes on the elements with the prefix 'toggle'. E.g. data-toggle-active-class="is-open". Data attributes will be given the higher priority.

Property	Default	Type	Description
`selector`	'.toggle'	String \|\| element	Element selector.
`activeClass`	'is-active'	String	CSS class when element is active.
`animClass`	'is-anim'	String	CSS class when element is animating.
`bodyClass`	''	String	CSS class added to the body when the element is active.
`animateHeight`	true	Boolean	Animate the height of the target element.
`textActive`	''	String	Text of element when it is active.
`textInactive`	''	String	Text of element when it is inactive.
`closeAuto`	false	Boolean	Automatically close the target element after a timeout or a click outside the element.
`closeDelay`	500	Integer(ms)	Delay in auto closing an element when it is not focused.
`closeOnEscape`	false	Boolean	Close the target element when the escape key is pressed.
`openAuto`	false	Boolean	Automatically open the target element on hover.

API

Property	Type	Description
`instance.toggle()`	Method	Toggles the state of the element and any target elements.
`instance.set(state)`	Method	Sets the state of the element and any target elements.
`instance.toggleElement()`	Method	Toggles the state of the element.
`instance.setElement(state)`	Method	Sets the state of the element.
`instance['element']`	Object	Returns the element and its properties.

Import Sass

@import "node_modules/tiny-ui-toggle/src/styles/tiny-ui-toggle.scss";

Markup

<button class="toggle" data-toggle-target="#demo-panel-single" aria-expanded="false">Open panel</button>

<div id="demo-panel-single" class="toggle-panel" aria-hidden="true">
  ...
</div>

Events

A 'toggle' event is started once an element is toggled. The event is ended once the element has changed state.

document.querySelector('#demo-panel-single').addEventListener('toggle', (event) => { 
  if (event.detail) console.log(`Action: ${event.detail.action}, Active: ${event.detail.active}`);
});

Compatibility

Supports all modern browsers (Firefox, Chrome, Safari and Edge) released as of October 2021.

Demo site

Clone or download from Github.

$ npm install
$ npm run dev