Author: | NaciAkce |
---|---|
Views Total: | 751 views |
Official Page: | Go to website |
Last Update: | February 13, 2020 |
License: | MIT |
Preview:

Description:
toggle-all is a vanilla JavaScript content toggle library designed for developers to quickly create accordion, tooltip, popover, dropdown, toggle menu, tabbed content components on the web app.
How to use it:
1. Install & download the toggle-all package.
# Yarn $ yarn add toggle-all # NPM $ npm install toggle-all --save
2. Import the library into your project.
// ES 6 import Toggle from 'toggle-all'
<!-- Browser Tag --> <script src="https://unpkg.com/toggle-all@latest/dist/bundle.umd.js" defer></script>
2. Create a dropdown menu.
<div class="dropdown show"> <a class="btn btn-primary dropdown__toggle" href="#" role="button" id="dropdownMenuLink-one" data-toggle="#dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown link </a> <div class="dropdown__container" id="dropdown" aria-labelledby="dropdownMenuLink-one"> <a class="dropdown__item" href="#">Action</a> <a class="dropdown__item" href="#">Another action</a> <a class="dropdown__item" href="#">Something else here</a> </div> </div>
3. Create a tooltip attached to an element.
<div class="tool-tip__content"> <button class="tool-tip__toggle" data-toggle="#tool-tip-dropdown-example" data-toggle-role="tooltip" aria-label="Tooltip" aria-describedby="tool-tip-dropdown-example"> Click Me </button> <div class="tool-tip__dropdown" id="tool-tip-dropdown-example"> Tooltip Content Here </div> </div>
4. Create tabs.
<div class="tabs__content"> <div class="tabs__list" id="myTab" role="tablist"> <a class="tabs__link is--active" id="first-tab" data-toggle="#first" data-toggle-group="#myTab" data-toggle-role="tab" href="#first" role="tab" aria-controls="first" aria-selected="true">Home</a> <a class="tabs__link" id="second-tab" data-toggle="#second" data-toggle-group="#myTab" data-toggle-role="tab" href="#first" role="tab" aria-controls="first" aria-selected="false">Profile</a> <a class="tabs__link" id="third-tab" data-toggle="#third" data-toggle-group="#myTab" data-toggle-role="tab" href="#first" role="tab" aria-controls="first" aria-selected="false">Contact</a> </div> <div class="tabs__content"> <div class="tabs__body is--active is--show" role="tabpanel" aria-labelledby="first-tab" id="first" data-toggle-animate="default"> <h4 class="tabs__header">Tab heading 1</h4> <p class="tabs__text">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Incidunt libero ipsum, veniam magni modi exercitationem debitis ducimus assumenda ratione corporis, illum eius, laborum tempore cumque amet id perspiciatis nostrum unde?</p> <p class="tabs__text">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsum, maiores.</p> </div> <div class="tabs__body" role="tabpanel" aria-labelledby="second-tab" id="second" data-toggle-animate="default"> <h4 class="tabs__header">Tab heading 2</h4> <p class="tabs__text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur odio cum eveniet excepturi eum provident molestias ad ipsa unde dignissimos illo porro animi earum aliquam perspiciatis id omnis, adipisci incidunt. Qui, beatae. Beatae animi totam obcaecati at quae, iste facere fuga nemo pariatur esse nihil?</p> <p class="tabs__text">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloremque commodi eos voluptatem numquam pariatur deleniti repellat fugiat eligendi nulla molestiae sunt praesentium vero sequi distinctio error quibusdam maiores natus magnam, explicabo hic sed alias dolores, quis eum! Reprehenderit atque cupiditate dolorum? Saepe, doloribus veniam? Nulla!</p> </div> <div class="tabs__body" role="tabpanel" aria-labelledby="third-tab" id="third" data-toggle-animate="default"> <h4 class="tabs__header">Tab heading 3</h4> <p class="tabs__text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam officiis voluptas maiores deserunt ullam aliquam?</p> <p class="tabs__text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus, officia accusantium quod fuga porro eius animi earum excepturi omnis! Reprehenderit!</p> </div> </div> </div>
5. Create an accordion component.
<div class="accordion__content" id="accordion"> <div class="accordion__card"> <div class="accordion__header" id="headingOne"> <button class="accordion__button is--active" data-toggle="#first-accordion" data-toggle-role="accordion" aria-controls="first" aria-expanded="true">Accordion 1 <span class="accordion__icon"></span></button> </div> <div class="accordion__dropdown is--active" aria-labelledby="headingOne" id="first-accordion"> <div class="accordion__body"> <h4 class="accordion__header">heading 1</h4> <p class="accordion__text">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Incidunt libero ipsum, veniam magni modi exercitationem debitis ducimus assumenda ratione corporis, illum eius, laborum tempore cumque amet id perspiciatis nostrum unde?</p> <p class="accordion__text">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsum, maiores.</p> </div> </div> </div> <div class="accordion__card"> <div class="accordion__header" id="headingTwo"> <button class="accordion__button" data-toggle="#second-accordion" data-toggle-role="accordion" aria-controls="second" aria-expanded="false">Accordion 1<span class="accordion__icon"></span></button> </div> <div class="accordion__dropdown" aria-labelledby="headingTwo" id="second-accordion"> <div class="accordion__body"> <h4 class="tabs__header">heading 1</h4> <p class="tabs__text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam officiis voluptas maiores deserunt ullam aliquam?</p> <p class="tabs__text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus, officia accusantium quod fuga porro eius animi earum excepturi omnis! Reprehenderit!</p> </div> </div> </div> <div class="accordion__card"> <div class="accordion__header" id="headingThree"> <button class="accordion__button" data-toggle="#third-accordion" data-toggle-group="#accordion" data-toggle-role="accordion" aria-controls="third" aria-expanded="false">Accordion 1 <span class="accordion__icon"></span></button> </div> <div class="accordion__dropdown" aria-labelledby="headingThree" id="third-accordion"> <div class="accordion__body"> <h4 class="accordion__header">heading 2</h4> <p class="accordion__text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur odio cum eveniet excepturi eum provident molestias ad ipsa unde dignissimos illo porro animi earum aliquam perspiciatis id omnis, adipisci incidunt. Qui, beatae. Beatae animi totam obcaecati at quae, iste facere fuga nemo pariatur esse nihil?</p> <p class="accordion__text">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloremque commodi eos voluptatem numquam pariatur deleniti repellat fugiat eligendi nulla molestiae sunt praesentium vero sequi distinctio error quibusdam maiores natus magnam, explicabo hic sed alias dolores, quis eum! Reprehenderit atque cupiditate dolorum? Saepe, doloribus veniam? Nulla!</p> </div> </div> </div> </div>
6. Create an overlay component.
<div class="nav__content"> <p>Menu</p> <span class="sr-only" id="toggle-btn-three">Toggle Navigation</span> <button class="dropdown__button nav-menu__button" data-toggle-group="group-1" data-toggle="#nav3" data-toggle-global data-toggle-role="overlay" aria-labelledby="toggle-btn-three"><span class="dropdown__open"></span><span class="dropdown__close"></span></button> <div id="nav3" class="nav-menu--transition" data-toggle-animate> <!-- Close button for mobile version --> <button class="dropdown__button nav-menu__button" data-toggle-back=".nav__content"><span class="dropdown__close"></span></button> <div class="nav-menu__scroll"> <nav class="nav nav-menu" data-toggle-next> <ul class="nav__list nav-menu--horizontal nav__list-0"> </ul> </nav> </div> </div> </div>
7. Make the content to be toggled on hover.
const init = window.toggle({ onHover: true });
8. Disable the hover event on specific screens.
const init = window.toggle({ onHover: true, onnHoverMediaQuery: '(max-width: 992px)' });
9. Stop playing videos when hidden.
const init = window.toggle({ stopVideo: true });
10. Default selectors & CSS classes.
const init = window.toggle({ selectorToggle: '[data-toggle]', selectorGlobal: '[data-toggle-global]', selectorGroup: '[data-toggle-group]', selectorValidate: '[data-toggle-validate]', selectorRole: '[data-toggle-role]', selectorBack: '[data-toggle-back]', selectorNext: '[data-toggle-next]', selectorAnimate: '[data-toggle-animate]', selectorHover: '[data-toggle-hover]', toggleActiveClass: 'is--active', toggleErrorClass: 'is--error', toggleCollapseClass: 'is--collapsing', toggleShowClass: 'is--show' });
11. Callback functions.
const init = window.toggle({ callbackOpen: false, callbackClose: false, callbackToggle: false });
Changelog:
v1.2.0 (02/13/2020)
- add new role ‘overlay’
- disable on media query attribute
10/25/2019
- v1.1.2