Show/Hide Matched Elements With Smooth Slide Motion – slideToggle

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 requestAnimationFrame 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:

Install & Download the slideToggle with package managers.

# Yarn
$ yarn add slidetoggle
# NPM
$ npm install slidetoggle --save

Import the slideToggle or include the UMD version of the slideToggle in your html page.

<script src="slidetoggle.js"></script>

// or
import slideToggle from 'slidetoggle';// slideToggle.slideToggle(element, speed); 
slideToggle.slideToggle('target-elemnt', 500);

Toggle the visibility of a specific element. Possible parameters:

• element: target element
• speed: animation speed in ms

// slideToggle.slideToggle(element, speed); 
slideToggle.slideToggle('target-elemnt', 500);

Changelog:

v3.3.2 (12/14/2021)

• Bugfix