Nothing's plumb meaningless
Miss any of our Open RFC calls?Watch the recordings here! »

dom-slider

2.1.6 • Public • Published

dom-slider

Known Vulnerabilities

It works like jQuery's slideToggle(), slideDown(), & slideUp(), but does not use display: none. Uses CSS3 transitions and element.scrollHeight to animate the height of elements with an unknown height.

dom-fader is a thing too.

Features:

  • Slides elements with a known or unknown height
  • Slides the height, padding, border, and margin (just the top and bottom values).
  • May slide multiple elements at once
  • Returns a Promise resolved with the element
  • Hides elements in a screen-reader-friendly way
  • Zero Dependencies and written in plain JavaScript (compiled to ES5)

Example Usage:

dom-slider CDN link

First, place the dom-slider CDN link in your html file above your own JavaScript files. Hide all the elements that you want to slide down/toggle using display: none in CSS. Then do stuff like below:

const {slideDown, slideUp, slideToggle} = window.domSlider
 
const box = document.querySelector('.box')
 
slideToggle({element: box})
 
slideUp({element: box, slideSpeed: 1200})
 
slideDown({element: box, slideSpeed: 800, easing: 'easeInOut'})
 
// Promises (or async/await)
slideDown({element: box, slideSpeed: 500}).then(() => {
  slideUp({element: box, slideSpeed: 300})
})

Options:

The element argument is required, but you may provide the following optional arguments to slideToggle, slideDown, and slideUp:

slideDown({
  element,
  slideSpeed, // speed in milliseconds
  easing, // CSS transition timing function,
  delay, // delay in milliseconds,
  visibleDisplayValue, // the CSS display value when the element is visible; the default value is "block"
})

Print Styling:

dom-slider removes the DOM-slider-hidden CSS class from all elements before printing and adds them back after printing.

Install

npm i dom-slider

DownloadsWeekly Downloads

949

Version

2.1.6

License

MIT

Unpacked Size

10.1 kB

Total Files

5

Last publish

Collaborators

  • avatar