Tiny UI Toggle

Toggle the state of a UI element to easily create components like collapse, accordion, tabs, dropdown and dialog / modal.

Features

Height animation
Syncs the state of triggers and targets
Open on hover, on click or through API
Close on exit, click outside or through API
Supports native elements (details, dialog, popover)
Toggles ARIA attributes
Toggles text on the trigger element

Examples

Collapse

Toggle details

Accordion

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

A dialog is a popup that appears over the page while a modal is a popup that prevents the user from interacting with the page until the modal is closed.

A dialog can use the dialog element or by adding add role="dialog" to another element. A modal is the same with aria-modal="true" added to the element.

Popover / Tooltip

Installation

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

Import the files into your project, add the elements to your markup and initialize the plugin.

JS: node_modules/tiny-ui-toggle/src/scripts/tiny-ui-toggle.js
CSS: node_modules/tiny-ui-toggle/src/styles/tiny-ui-toggle/tiny-ui-toggle.css
Compiled CSS: node_modules/tiny-ui-toggle/src/styles/tiny-ui-toggle.css

JavaScript

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 });
};

// Initialize a single instance.
const defaultToggle = 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". Attributes will be given the highest priority.

Property	Default	Type	Description
`selector`	'.toggle'	String \|\| element	Trigger element selector.
`target`	''	String \|\| element	Target element selector.
`group`	''	String \|\| element	Group 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.
`textSelector`	'.toggle-text'	String	Element for toggle text.
`textActive`	''	String	Text of element when it is active.
`textInactive`	''	String	Text of element when it is inactive.
`closeAuto`	false	boolean \|\| string	Automatically close the element when the pointer stops hovering the element or there is a click outside the element. It can be scoped to only trigger for when hover ends with 'hover' or on an outside click with 'click'.
`closeAutoDelay`	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.getInfo()`	Object	Returns the element and its properties.

Markup

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

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

Events

A toggle fires an event on each toggle state i.e. toggleOpening, toggleOpened, toggleClosing and toggleClosed. This can be observed on the element itself or the document.

document.querySelector('.toggle').addEventListener('toggleOpening', (event) => { 
  console.log('Toggle Opening', event.target);
});

Compatibility

Supports all modern browsers at the time of release.

Demo site

Clone the repo from Github and run the commands below.

$ npm install
$ npm run dev