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.