jQuery slideToggle slideUp slideDown Replacement – SimpleSlideToggle.js

Preview:

Description:

A vanilla JavaScript implementation of slideUp & slideDown animations. Use it to reveal & hide given elements with a smooth slide effect without jQuery dependency.

See Also:

• Animated slideUp & slideDown Of Elements In Pure JavaScript – dom-slider
• ES6 slideUp & slideDown Library
• Show/Hide Matched Elements With Smooth Slide Motion – slideToggle
• Smooth Slide Toggle In Vanilla JavaScript

How to use it:

1. Install & Download.

# NPM
$ npm i simple-slide-toggle

2. Import the simpleSlideToggle.js JavaScript library.

import { slideUp, slideDown, slideToggle } from 'simple-slide-toggle'

<script src="./dist/simpleSlideToggle.js"></script>

3. Toggle the visibility of an element.

<div
  id="example"
  aria-hidden="true"
  aria-expanded="false">
  Show/Hide Me
</div>

const $target = document.getElementById('example')
slideToggle($target);

4. Specify the animation speed.

slideToggle($target, 500);