Create Collapsible Elements With Lux Toggle

Preview:

Description:

Lux Toggle is a tiny and feature-rich library for creating toggleable/collapsible elements like dropdowns, menus, accordions, sliding boxes, toggle buttons, and much more.

How to use it:

1. Install & Download the package.

# Yarn
$ yarn add lux-toggle
# NPM
$ npm i lux-toggle --save

2. Import the Lux Toggle.

// as a module
import luxToggle from 'lux-toggle';
// or insert the script into the document
<script src="/path/to/dist/lux-toggle.js"></script>

3. Initialize the Lux Toggle and we’re ready to go.

luxToggle();

4. Create togglable elements as follows. Toggles are specified by adding a data attribute ‘config.attr.target’ to an HTML element. The value of the ‘config.attr.target’ should ID the idea of the target. When the toggle is clicked both the toggle and target will have opening, open, and closing classes applied as appropriate, with delays to allow CSS animations to be applied.

• Groups can be defined by adding the ‘config.attr.toggleGroup’ to the toggle element. The value of the ‘config.attr.toggleGroup’ should be the group name. When toggling a toggle in the group, it will check if any of the siblings are open and if so, delay the open event to allow the sibling to close.
• You can set any element inside the toggle target to act as a close button. Set the ID of the close button as the value for the the ‘config.attr.closeButton’ data attribute on the toggle element.

// Basic
<span data-lux-toggle="targetElement"
      data-lux-toggle-close="closeButton">
      Toggle button
</span>
<div id="targetElement">
  <span id="closeButton"></span>
  <div>Toggleable Content Here</div>
</div>

// Group
<span data-lux-toggle="targetElement1"
      data-lux-toggle-close="closeButton"
      data-lux-toggle-mode="group"
      data-lux-toggle-group="myGroup">
      Toggle button
</span>
<span data-lux-toggle="targetElement2"
      data-lux-toggle-close="closeButton"
      data-lux-toggle-mode="group"
      data-lux-toggle-group="myGroup">
      Toggle button
</span>
<div id="targetElement1">
  <span id="closeButton"></span>
  <div>Toggleable Content Here</div>
</div>
<div id="targetElement2">
  <span id="closeButton"></span>
  <div>Toggleable Content Here</div>
</div>

5. Determine whether to auto collapse the content whenever you click outside the toggle content.

// Basic
<span data-lux-toggle="targetElement"
      data-lux-toggle-close="closeButton"
      data-lux-toggle-mode="outside">
      Toggle button
</span>
<div id="targetElement">
  <span id="closeButton"></span>
  <div>Toggleable Content Here</div>
</div>

6. Create a dropdown menu with the ‘Menu’ mode.

<h3 class="menuItem__title example__heading toggle__button"
  tabindex="0"
  data-lux-toggle="submenu1"
  data-lux-toggle-mode="group"
  data-lux-toggle-group="menuExampleGroup"
  data-lux-toggle-menu="true">
  Main menu
</h3>
<ul class="menuItem__submenu" id="submenu1">
  <li>
      <a href="https://en.wikipedia.org/wiki/JavaScript">JavaScript</a>
  </li>
  <li>
      <a href="https://en.wikipedia.org/wiki/PHP">PHP</a>
  </li>
  <li>
      <a href="https://en.wikipedia.org/wiki/SQL">SQL</a>
  </li>
  <li>
      <a href="https://en.wikipedia.org/wiki/JSON">JSON</a>
  </li>
</ul>