Skip to content

Instantly share code, notes, and snippets.

@tannerhodges
Forked from ludder/slideDown.js
Last active February 24, 2020 10:34
Show Gist options
  • Save tannerhodges/fcb758a0997f997a2adb3d1750023523 to your computer and use it in GitHub Desktop.
Save tannerhodges/fcb758a0997f997a2adb3d1750023523 to your computer and use it in GitHub Desktop.
Vanilla JavaScript slideUp and slideDown functions
/**
* Slide an element down like jQuery's slideDown function using CSS3 transitions.
* @see https://gist.github.com/ludder/4226288
* @param {element} el
* @param {string} timing
* @return {void}
*/
function slideDown(el, timing) {
timing = timing || '300ms ease';
// Get element height
el.style.webkitTransition = 'initial';
el.style.transition = 'initial';
el.style.visibility = 'hidden';
el.style.maxHeight = 'initial';
var height = el.offsetHeight + 'px';
el.style.removeProperty('visibility');
el.style.maxHeight = '0';
el.style.overflow = 'hidden';
// Begin transition
el.style.webkitTransition = 'max-height ' + timing + ', opacity ' + timing + '';
el.style.transition = 'max-height ' + timing + ', opacity ' + timing + '';
var endSlideDown = function() {
el.style.removeProperty('-webkit-transition');
el.style.removeProperty('transition');
el.removeEventListener(transitionEvent('end'), endSlideDown);
};
requestAnimationFrame(function() {
el.addEventListener(transitionEvent('end'), endSlideDown);
el.style.maxHeight = height;
el.style.opacity = '1';
});
}
/**
* Slide an element up like jQuery's slideUp function using CSS3 transitions.
* @see https://gist.github.com/ludder/4226288
* @param {element} el
* @param {string} timing
* @return {void}
*/
function slideUp(el, timing) {
timing = timing || '300ms ease';
// Get element height
el.style.webkitTransition = 'initial';
el.style.transition = 'initial';
var height = el.offsetHeight + 'px';
el.style.maxHeight = height;
el.style.overflow = 'hidden';
// Begin transition
el.style.webkitTransition = 'max-height ' + timing + ', opacity ' + timing + '';
el.style.transition = 'max-height ' + timing + ', opacity ' + timing + '';
var endSlideDown = function() {
el.style.removeProperty('-webkit-transition');
el.style.removeProperty('transition');
el.removeEventListener(transitionEvent('end'), endSlideDown);
};
requestAnimationFrame(function() {
el.style.maxHeight = '0';
el.style.opacity = '0';
});
}
@MatzeKitt
Copy link

In order to support IE11, too, you should consider that initial doesn’t work here. For max-height and transition, I used none.
Then it worked in IE11, too! 🎉

@UraraReika
Copy link

there is a link to the demo?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment