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