Versatile Content Toggle Component In JavaScript – Tiny UI Toggle

Preview:

Description:

A tiny yet multifunctional content toggle plugin for toggling the state of any UI elements within the document.

Great for accordions, tabs, modals, dialogs, dropdowns, and much more.

How to use it:

1. Import the Tiny UI Toggle component.

<!-- Stylesheet -->
<link rel="stylesheet" href="tiny-ui-toggle.css" />

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

2. Initialize the Tiny UI Toggle on all toggleable elements with the CSS class of ‘toggle’.

toggleAutoInit();

3. Enable a button to toggle a DIV element.

<!-- Toggle Button -->
<button id="demo" class="toggle toggle-btn" data-toggle-target="#my-content" aria-expanded="false" aria-controls="demo-panel-aria">Open panel</button>

<!-- Content To Toggle -->
<div id="my-content" class="toggle-panel" aria-hidden="true" aria-labelledby="demo-btn-aria">
  <div class="toggle-panel-content">
    Any Content Here
  </div>
</div>

4. Create an accordion interface.

<div class="toggle-accordion">
  <button class="toggle toggle-btn is-active" data-toggle-target="#demo-panel-accordion-1" data-toggle-group=".demo-panel-accordion" aria-expanded="true">Accordion toggle 1</button>
  <div id="demo-panel-accordion-1" class="toggle-panel is-active demo-panel-accordion" aria-hidden="false">
    <div class="toggle-panel-content">
      Accordion Panel 1
    </div>
  </div>
</div>
<div class="toggle-accordion">
  <button class="toggle toggle-btn" data-toggle-target="#demo-panel-accordion-2" data-toggle-group=".demo-panel-accordion" aria-expanded="false">Accordion toggle 2</button>
  <div id="demo-panel-accordion-2" class="toggle-panel demo-panel-accordion" aria-hidden="true">
    <div class="toggle-panel-content">
      Accordion Panel 2
    </div>
  </div>
</div>
...

5. Create a tabs interface.

<div class="toggle-btn-tabs">
  <button class="toggle toggle-btn is-active" data-toggle-target="#demo-panel-tabs-1" data-toggle-group=".demo-panel-tabs" aria-expanded="true">Tab toggle 1</button>
  <button class="toggle toggle-btn" data-toggle-target="#demo-panel-tabs-2" data-toggle-group=".demo-panel-tabs" aria-expanded="false">Tab toggle 2</button>
</div>
<div id="demo-panel-tabs-1" class="toggle-panel toggle-panel--none is-active demo-panel-tabs" data-toggle-animate-height="false" aria-hidden="false">
  <div class="toggle-panel-content">
    Tab 1
  </div>
</div>
<div id="demo-panel-tabs-2" class="toggle-panel toggle-panel--none demo-panel-tabs" data-toggle-animate-height="false" aria-hidden="true">
  <div class="toggle-panel-content">
    Tab 2
  </div>
</div>

6. Create a dropdown menu.

<div class="toggle-outer">
  <button id="demo-btn-dropdown" class="toggle toggle-btn" data-toggle-target="#demo-panel-dropdown" aria-expanded="false">Dropdown with auto open and auto close</button>
  <div id="demo-panel-dropdown" class="toggle-panel toggle-panel--dropdown" aria-hidden="true">
    <div class="toggle-panel-content">
      Action One<br>
      Action Two<br>
      Action Three
    </div>
  </div>
</div>

7. Enable a button to toggle a modal dialog.

<button class="toggle toggle-btn" data-toggle-target="#demo-panel-dialog">Show dialog</button>
<div id="demo-panel-dialog" class="toggle-dialog" data-toggle-animate-height="false" data-toggle-body-class="has-dialog" aria-hidden="true" role="dialog">
    <div class="toggle-dialog-content">
      <button class="toggle toggle-btn is-active" data-toggle-target="#demo-panel-dialog">Close</button>
      Modal Content Here
    </div>
    <div class="toggle toggle-dialog-background" data-toggle-target="#demo-panel-dialog"></div>
</div>

8. You can also initialize the library manually and pass the options to the Toggle method. Note that the options can also be passed via data-OPTION attribute as you’ve seen above.

• selector – Element selector.
• activeClass – CSS class when element is active.
• animClass – CSS class when element is animating.
• bodyClass – CSS class added to the body when the element is active.
• animateHeight – Animate the height of the target element.
• textActive – Text of element when it is active.
• textInactive – Text of element when it is inactive.
• closeAuto – Automatically close the target element after a timeout or a click outside the element.
• closeDelay – Delay in auto closing an element when it is not focused.
• openAuto – Automatically open the target element on hover.

const toggleDropdown = Toggle({ 
      selector: '.toggle',
      activeClass: 'is-active',
      animClass: 'is-anim',
      bodyClass: '',
      animateHeight: true,
      textActive: '',
      textInactive: '',
      closeAuto: false,
      closeDelay: 500,
      openAuto: false
});

9. API methods.

const defaultToggle = Toggle({ selector: '#demo-btn-single' });
// Toggles the state of an element, the trigger element is the default
defaultToggle.toggleState(); 
defaultToggle.toggleState(document.querySelector('#demo-panel-single')); 
// Equivalent to the above without initializing
Toggle().toggleState(document.querySelector('#demo-btn-single'));
Toggle().toggleState(document.querySelector('#demo-panel-single'));

// Sets the state of an element, the trigger element is the default
defaultToggle.setState(true); 
defaultToggle.setState(true, document.querySelector('#demo-panel-single')); 
Toggle().setState(true, document.querySelector('#demo-btn-single'));
Toggle().setState(true, document.querySelector('#demo-panel-single'));
// Toggles the state of the trigger and the target
defaultToggle.toggle();
Toggle().toggle(document.querySelector('#demo-btn-single'));
console.log(defaultToggle['element']);
console.log(defaultToggle['props']);

10. Event handlers.

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