Plain JavaScript version of jQuery's slideToggle(), slideDown(), & slideUp(), but does not use display: none.
Switch branches/tags
Nothing to show
Clone or download
Pull request Compare This branch is 4 commits behind BrentonCozby:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist
example
src
.babelrc
.gitignore
LICENSE
README.md
package-lock.json
package.json

README.md

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:

First, place the dom-slider.js file in your code somewhere. Then do stuff like below:

import 'dom-slider' // if using ES6 modules

const box = document.querySelector('.box')

box.slideToggle()

box.slideUp(1200)

box.slideDown(800, 'easeInOut')

box.slideDown(500).slideUp(300)

box.slideUp().then(function() {
  console.log('Done sliding!')
})

Install:

npm install --save dom-slider

or include a script tag with the file served from a CDN:

<script src="https://cdn.rawgit.com/BrentonCozby/dom-slider/5af8b397/dist/dom-slider.js"></script>

Options:

No arguments required, but you may give the following arguments to slideToggle, slideDown, and slideUp:

slideDown(speedInMilliseconds, CSSTransitionTimingFunction, delayInMilliseconds, visibleDisplayValue)

Print Styling:

dom-slider removes the DOM-slider-hidden CSS class from all elements before printing.