tw-slide-toggle

A vanilla JS replacement for jQuery's slide functions.

Usage

import { slideUp, slideDown, slideToggle } from 'tw-slide-toggle';
 
const target = document.querySelector('.slide-target');
slideToggle(target, {
  duration: 500
});

Options

Name	Type	Description	Default
duration	number	Animation duration in ms	350
ease	string	Easing function	easeInOut
display	string	Final display property	block
callback	function	Callback that fires on completion	noop

Notes

The callback option fires on animation completion and provides two arguments: isVisible (whether or not the element is visible) and element (the element that was animated).

Avoid setting opacity, visibility, and height properties in your CSS. All you need to do is set your element to display: none (or display: block if sliding up). The slideToggle functions will handle the rest. Setting the visibility in any other way may affect the animation (for instance, opacity 0 will keep the element hidden forever).

Avoid setting a transition on the height property of your element. The slideToggle functions animate the height of the element themselves, so there's no need to double up in the CSS. Doing so will cause your animation to be extremely slow & choppy.