Author: | zgrybus |
---|---|
Views Total: | 1,807 views |
Official Page: | Go to website |
Last Update: | June 16, 2024 |
License: | MIT |
Preview:

Description:
slideToggle is a pure JavaScript replacement for the jQuery slideToggle() method.
The slideToggle enables you to show/hide specific elements with a smooth sliding effect using Animation API without any 3rd dependencies.
See Also:
- Slide Toggle In Vanilla JavaScript – slideToggle.js
- jQuery slideToggle slideUp slideDown Replacement – SimpleSlideToggle.js
- Animated slideUp & slideDown Of Elements In Pure JavaScript – dom-slider
How to use it:
1. Install & Download the slideToggle with package managers.
# Yarn $ yarn add slidetoggle # NPM $ npm install slidetoggle --save
2. Import the slideToggle or include the UMD version of the slideToggle in your html page.
<script src="slidetoggle.js"></script> slidetoggle.show(document.querySelector('.yourElement'), { // options here });
// or import { hide, show, toggle } from 'slidetoggle'; toggle('.yourElement', { // options here });
3. Available options.
slidetoggle.show(document.querySelector('.yourElement'), { miliseconds: 400, onAnimationStart: elementRef() => { console.log('toggle: START ( onAnimationStart )', elementRef); }, onAnimationEnd: (elementRef) => { console.log('toggle: END ( onAnimationEnd )', elementRef); }, onOpen: (elementRef) => { console.log('element: VISIBLE ( onOpen )', elementRef); }, onClose: (elementRef) => { console.log('element: HIDDEN ( onClose )', elementRef); }, elementDisplayStyle: 'flex', transitionFunction: 'ease-in', });
Changelog:
v4.0.0 (06/16/2024)
- Bugfix
- Migrate to Animation API
v3.3.2 (12/14/2021)
- Bugfix