Tiny UI Toggle

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

Tiny UI Toggle logo

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
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.
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.
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.

Accordion

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.

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

Menu

This example is setup so the dropdowns only close when you go outside of the whole menu box and styles have been added to transform the dropdowns to an accordion on small screens.

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.

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.

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