dom-slider
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 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.
13 Oct 20, 2022
5 Jul 10, 2022
152 Apr 20, 2022
5 Dec 15, 2022
10 Aug 3, 2022
11 Dec 18, 2022
17 Oct 31, 2022
5 Oct 9, 2022
33 Nov 25, 2022
7 Jan 14, 2022
82 Dec 7, 2022
393 Jan 6, 2023
14 Feb 23, 2022
183 Dec 24, 2022
44 Dec 5, 2022
37 Dec 19, 2022
10 Jul 10, 2022
410 Dec 14, 2022
5 Oct 23, 2022