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
See Also:
Pure CSS Mobile-compatible Responsive Dropdown Menu
Fast Touch-Friendly Picker Library for JavaScript & React – Quickpick UI
Multi-select Dropdown Component For JavaScript – slim-select
Bootstrap 5 Select Dropdown Enhancer – AvalynxSelect
Powerful Single & Multiple Select Library – tail.select
Animated Tabs Component In Pure CSS – Tabsy CSS
Convert HTML Lists into Custom Dropdowns – Simple Select
Convert Sectioned Contents Into Tabs – tinytabs