Tiny UI Toggle

Tiny UI Toggle is a tiny, flexible and accessible JavaScript plugin that simplifies the creation of UI components that toggle their state. Many components rely on the pattern of a clicked element toggling the state of another element to show or hide content. This includes components like collapse panels, accordions, tabs, dropdowns, modals, and tooltips.

The plugin can be used out of the box or customized for various use cases through its API or data attributes. The state of the component can be toggled by clicking, hovering, clicking outside, or through the API. All relevant ARIA attributes are also toggled for accessibility.

The state of the component is synchronized across the trigger and target elements based on CSS animation timings. Built-in height animation is provided for accordions and similar components, but can be customized through CSS classes to achieve any desired effect.

Check out the demo site for lots of examples, the GitHub for the code or run npm install tiny-ui-toggle –save-dev to give it a try.