Show/Hide Matched Elements With Smooth Slide Motion – slideToggle

Category: Animation , Javascript | June 16, 2024
Author:zgrybus
Views Total:1,807 views
Official Page:Go to website
Last Update:June 16, 2024
License:MIT

Preview:

Show/Hide Matched Elements With Smooth Slide Motion – slideToggle

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:

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

You Might Be Interested In:


Leave a Reply