Toggle
Toggle can handle Dropdowns, Accordions, Menu, Tabs, Tooltips. Can be grouped and supports also on hover also
Options
selectorToggle: '[data-toggle]' // Toggle Selector selectorGlobal: '[data-toggle-global]' // Close Toggle if click outside selectorGroup: '[data-toggle-group]' // Group toggles selectorValidate: '[data-toggle-validate]' // Form Validation - Prevent Closing if invalid selectorRole: '[data-toggle-role]' // tab, accordion, tooltip, overlay, default selectorBack: '[data-toggle-back]' // Close Toggle. You select a parentSelector. see examples selectorNext: '[data-toggle-next]' // Selects next Sibling. Add to Parent. Use Case: for Nested Multiple driopdowns with same classes instead of unique IDs selectorAnimate: '[data-toggle-animate]' // Animate. Values: default(all other css transitions), height(accordion) selectorHover: '[data-toggle-hover]' // Add to direct Parent toggleActiveClass: 'is--active' toggleErrorClass: 'is--error' toggleCollapseClass: 'is--collapsing' // Class while animating height toggleShowClass: 'is--show' // Class while default animation onHover: false onnHoverMediaQuery: '(max-width: 992px)' // Disable hover e.g smaller then 992px stopVideo: true callbackOpen: false callbackClose: false callbackToggle: false
Installation
npm
npm i toggle-all
yarn
yarn add toggle-all
unpkg
<script src="https://unpkg.com/toggle-all@latest/dist/bundle.umd.js" defer></script>
js
import Toggle from 'toggle-all'
Usage
Simple
Dropdown link ...
Global - close dropdown on click outside
'data-toggle-global'
Dropdown link ...
Grouped - close grouped element if is active
'data-toggle-group'
Dropdown link 1 ... Dropdown link 2 ...
Role and Back
'data-toggle-role' there are special behaviors : tab, accordion, tooltip, overlay
in this case 'overlay' adds a class to the body tag 'is--overlay' to prevent scrolling
'data-toggle-back' select the parentElement who inherits the toggle
Menu Toggle Navigation <!-- Close button for mobile version -->
Example - Enable Hover Support
;
... ... ...
Browser Support
"browserslist": ,
HTML and CSS
Touch
if you use overlays which covers the whole screen in combination with transitions (last example)
Click ios
trigger click events on non tapable elements. You have to add the css property cursor:pointer. There is already a class for the body tag is--ios
if you use data-toggle-global
body {
&.is--ios {
cursor: pointer;
}
}
html {
touch-action: manipulation;
}
a, button {
touch-action: manipulation;
}