Minimalist Toggle Utility – Lux Toggle for creating interchangeable dome elements using JavaScript. Inspired by a boot switch but without the overhead. Implemented in Vanilla JS in a practical style.
This Toggle is a tiny and feature-rich library for creating toggleable/collapsible parts like dropdowns, menus, accordions, sliding containers, toggle buttons, and far more.
How to make use of 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.
luxToggle();
4. Toggles are specified by including an information attribute ‘config.attr.target’ to an HTML factor.
// 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 or not to auto-collapse the content material every time you click on the toggle.
// 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="">JavaScript</a>
</li>
<li>
<a href="">PHP</a>
</li>
<li>
<a href="">SQL</a>
</li>
<li>
<a href="">JSON</a>
</li>
</ul>See Demo And Download
Official Website(JessChampion): Click Here
This superior jQuery/javascript plugin is developed by JessChampion. For extra Advanced Usage, please go to the official website.
