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

Overview

Tiny UI Toggle

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

Demo and documentation


Quick start

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

Import the JS and CSS into your project, add the elements to your HTML and initialize the plugin.

Full documentation


License

MIT © Nigel O Toole

You might also like...

A tiny JavaScript library to easily toggle the state of any HTML element in any contexts, and create UI components in no time.

A tiny JavaScript library to easily toggle the state of any HTML element in any contexts, and create UI components in no time.

A tiny JavaScript library to easily toggle the state of any HTML element in any contexts, and create UI components in no time. Dropdown, navigation bu

Nov 25, 2022

LiveTabs is a Javascript library that allows you to create and manage tabs on the fly. This library gives the ability to your application to act like browser tabs, making dynamic tabs.

LiveTabs Table of content Description Goals Technologies Setup Description LiveTabs is a Javascript library that allows you to create and manage tabs

May 3, 2022

Easy responsive tabs - is a lightweight jQuery plugin which optimizes normal horizontal or vertical tabs to accordion on multi devices

Easy responsive tabs - is a lightweight jQuery plugin which optimizes normal horizontal or vertical tabs to accordion on multi devices like: web, tablets, Mobile (IPad & IPhone). This plugin adapts the screen size and changes its action accordingly.

Dec 8, 2022

react-dialog is a custom react hook to use a dialog easily

react-dialog react-dialog is a custom react hook to use a dialog easily. Documentation To use react-dialog follow the documentation. useDialog Returns

Mar 29, 2022

Accordion Slider is a jQuery plugin that combines the functionality of a slider with that of an accordion.

Accordion Slider - jQuery slider plugin A responsive and touch-enabled jQuery accordion slider plugin that combines the functionality of a slider with

Dec 29, 2022

Based on pure JS scripts, without relying on native, no need for react-native link, Title / Header / Tabs / Sticky / Screen components can be flexibly configured, among which Tabs / Sticky can slide When it reaches the top, it will be topped.

Based on pure JS scripts, without relying on native, no need for react-native link, Title / Header / Tabs / Sticky / Screen components can be flexibly configured, among which Tabs / Sticky can slide When it reaches the top, it will be topped.

react-native-scrollable-tabview English | 简体中文 Based on pure JS scripts, without relying on native, no need for react-native link,Title / Header / Tab

Dec 30, 2022

Custom HTML elements for generic components (dropdown, modal...) without style.

Headless elements The goal of this project is to create a library of Custom Elements to stop reinventing the wheel (starting by reinventing the wheel

Sep 17, 2022

⚡️The Fullstack React Framework — built on Next.js

⚡️The Fullstack React Framework — built on Next.js

The Fullstack React Framework "Zero-API" Data Layer — Built on Next.js — Inspired by Ruby on Rails Read the Documentation “Zero-API” data layer lets y

Jan 4, 2023

Accessible modal dialog component for React

react-modal Accessible modal dialog component for React.JS Table of Contents Installation API documentation Examples Demos Installation To install, yo

Jan 1, 2023

Simple to use modal / alert / dialog / popup. Created with vanilla JS. No javascript knowledge required! Works on every browser and device! IE9

Simple to use modal / alert / dialog / popup. Created with vanilla JS. No javascript knowledge required! Works on every browser and device! IE9

EinsModal The last modal / alert / dialog you will ever need! Full Documentation: https://www.einscms.com/modal EinsModal is the best solution to inte

Oct 20, 2022

A very lightweight and flexible accessible modal dialog script.

A11y Dialog This is a lightweight (1.3Kb) yet flexible script to create accessible dialog windows. Documentation ↗ Demo on CodeSandbox ↗ Features: Clo

Jan 2, 2023

Responsive tabs-to-accordion script without jQuery, written using pure JavaScript

vanilla-tabs Responsive tabs-to-accordion script without jQuery, written using pure JavaScript Author Dmytro Kudleichuk LinkedIn GitHub Online Demo Se

Dec 20, 2022

Different Widgets: Accordion, Search from Wikipedia(Wiki API), DropDown, Translate(Google API)

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: ya

Dec 19, 2021

Execute obsidian commands with short key sequences. For example, 'tp' for 'Toggle Preview' and 'tb' for 'Toggle Sidebar'. Easier to remember.

Execute obsidian commands with short key sequences. For example, 'tp' for 'Toggle Preview' and 'tb' for 'Toggle Sidebar'. Easier to remember.

Key Sequence Shortcut Key Sequence Shortcut is an obsidian plugin, allow binding key sequences to an obsidian command. For example If we assume "t" st

Dec 26, 2022

Hello! Welcome to Our own Live Code Editor 2!! This is supported tabs and full-screen editing, Console, tabs and more are coming. We uses this one in our all tutorials. Made by @E-Coders & @Genius398

Live Code Editor 2 Hello! this is our live code editor an another second release version of our main Resporibity. This have style as tabs and more fea

Nov 18, 2021

jQuery Tabs Plugin. CSS Tabs with Accessible and Responsive Design. Lot of Tab Themes with Vertical and Horizontal Orientation.

Macaw Tabs Macaw Tabs is jQuery tabs plugin. It helps you to create accessible and responsive jQuery tabs by implementing the W3 design patterns for t

Dec 8, 2022

Lightweight vanilla js modal component (just 2kb) , pure javascript Modal

Lightweight vanilla js modal component (just 2kb) pure javascript Modal , This is just 2kb Lightweight vanilla js modal component with zero dependenci

Dec 12, 2022

jQuery plugin to show a tabs bar for navigation. The tabs can be defined once, and shared across multiple HTML pages.

jQuery plugin to show a tabs bar for navigation. The tabs can be defined once, and shared across multiple HTML pages.

jquery.simpletabs v1.2.3 The jquery.simpletabs plugin shows a tabs bar for navigation. The tabs can be defined once, and shared across multiple HTML p

Feb 23, 2022
Comments
  • Escape key, focus for accessibility

    Escape key, focus for accessibility

    The escape key should close the modals/overlays. Focus should remain inside the modal while it is open and should return to wherever it was before when the modal is closed.

    See http://simplyaccessible.com/article/closing-modals/

    opened by seezee 1
  • Event name clashing on `<details>` element

    Event name clashing on `
    ` element

    Since the <details> element also has a "toggle" event. If you add the event listener below:

    document.querySelector('details.toggle-panel').addEventListener('toggle', ({ target }) => console.log(target.open));
    

    When you open the panel, the console looks like this: image

    Where as opening a normal <details> element would look like this: image

    I love that you added in animation for <details> since that is sorely needed.

    opened by gingerchew 1
Owner
Nigel O Toole
I love to make great things for the web, developed using best practices with excellent usability, accessibility and performance.
Nigel O Toole
jBox is a jQuery plugin that makes it easy to create customizable tooltips, modal windows, image galleries and more.

jBox jBox is a jQuery plugin that makes it easy to create customizable tooltips, modal windows, image galleries and more. Demo: https://stephanwagner.

Stephan Wagner 1.4k Dec 15, 2022
A modern dialog library which is highly configurable and easy to style. #hubspot-open-source

vex Demo Documentation vex is a modern dialog library which is highly configurable, easily stylable, and gets out of the way. You'll love vex because

HubSpot 6.9k Jan 5, 2023
A modern dialog library which is highly configurable and easy to style. #hubspot-open-source

vex Demo Documentation vex is a modern dialog library which is highly configurable, easily stylable, and gets out of the way. You'll love vex because

HubSpot 6.9k Apr 1, 2021
Avgrund is jQuery plugin with new modal concept for popups

Avgrund Avgrund is a jQuery plugin for your modal boxes and popups. It uses new concept showing depth between popup and page. It works in all modern b

Dmitri Voronianski 1.8k Dec 14, 2022
Extends the default Bootstrap Modal class. Responsive, stackable, ajax and more.

Note: Since this plugin was created to solve a lot of the issues with BS2, it still uses the BS2 markup syntax. Currently I believe the default BS3 mo

Jordan Schroter 5k Dec 28, 2022
A modal built with pure CSS, enhanced with JavaScript

CSS Modals Modals built out of pure CSS Please visit the website to read more about this project and refer to the FAQ in case of a question. What is i

Hans Christian Reinl 1.8k Dec 22, 2022
Elegant, responsive, flexible and lightweight modal plugin with jQuery.

iziModal Elegant, responsive, flexible and lightweight modal plugin with jQuery. izimodal.marcelodolza.com Fast Responsive Animated Lightweight Custom

Marcelo Dolza 2.1k Dec 30, 2022
The simplest possible modal for jQuery

A simple & lightweight method of displaying modal windows with jQuery. For quick examples and demos, head to jquerymodal.com. Why another modal plugin

Kyle Fox 2.5k Dec 29, 2022
A simple vanilla and lightweight modal which is easy to expand

A simple vanilla and lightweight modal which is easy to expand

null 1 Jul 3, 2022
jQuery PopBox UI Element

jQuery PopBox jQuery PopBox is a simple balloon UI element inspired by 37Signals Highrise CRM. See it in action here: http://gristmill.github.com/jque

Gristmill 427 Sep 24, 2022