Skip to content

Instantly share code, notes, and snippets.

@skttl
Last active February 24, 2023 07:47
Show Gist options
  • Save skttl/b8ea597ebf2db66a3e2a06491f7b4029 to your computer and use it in GitHub Desktop.
Save skttl/b8ea597ebf2db66a3e2a06491f7b4029 to your computer and use it in GitHub Desktop.
Vanilla JS slideup slidedown slidetoggle
let fadeOut = (target, duration=500) => {
target.style.transitionProperty = 'opacity';
target.style.transitionDuration = duration + 'ms';
target.style.opacity = 0;
window.setTimeout( () => {
target.style.display = 'none';
target.style.removeProperty('opacity');
target.style.removeProperty('transition-duration');
target.style.removeProperty('transition-property');
//alert("!");
}, duration);
}
let fadeIn = (target, duration=500) => {
target.style.opacity = 0;
target.style.removeProperty('display');
let display = window.getComputedStyle(target).display;
if (display === 'none')
display = 'block';
target.style.display = display;
target.style.transitionProperty = "opacity";
target.style.transitionDuration = duration + 'ms';
window.setTimeout(() => {
target.style.opacity = 1;
window.setTimeout( () => {
target.style.removeProperty('opacity');
target.style.removeProperty('transition-duration');
target.style.removeProperty('transition-property');
}, duration);
}, 1);
}
var fadeToggle = (target, duration = 500) => {
if (window.getComputedStyle(target).display === 'none') {
return fadeIn(target, duration);
} else {
return fadeOut(target, duration);
}
}
let slideUp = (target, duration=500) => {
target.style.transitionProperty = 'height, margin, padding';
target.style.transitionDuration = duration + 'ms';
target.style.boxSizing = 'border-box';
target.style.height = target.offsetHeight + 'px';
target.offsetHeight;
target.style.overflow = 'hidden';
target.style.height = 0;
target.style.paddingTop = 0;
target.style.paddingBottom = 0;
target.style.marginTop = 0;
target.style.marginBottom = 0;
window.setTimeout( () => {
target.style.display = 'none';
target.style.removeProperty('height');
target.style.removeProperty('padding-top');
target.style.removeProperty('padding-bottom');
target.style.removeProperty('margin-top');
target.style.removeProperty('margin-bottom');
target.style.removeProperty('overflow');
target.style.removeProperty('transition-duration');
target.style.removeProperty('transition-property');
//alert("!");
}, duration);
}
let slideDown = (target, duration=500) => {
target.style.removeProperty('display');
let display = window.getComputedStyle(target).display;
if (display === 'none')
display = 'block';
target.style.display = display;
let height = target.offsetHeight;
target.style.overflow = 'hidden';
target.style.height = 0;
target.style.paddingTop = 0;
target.style.paddingBottom = 0;
target.style.marginTop = 0;
target.style.marginBottom = 0;
target.offsetHeight;
target.style.boxSizing = 'border-box';
target.style.transitionProperty = "height, margin, padding";
target.style.transitionDuration = duration + 'ms';
target.style.height = height + 'px';
target.style.removeProperty('padding-top');
target.style.removeProperty('padding-bottom');
target.style.removeProperty('margin-top');
target.style.removeProperty('margin-bottom');
window.setTimeout( () => {
target.style.removeProperty('height');
target.style.removeProperty('overflow');
target.style.removeProperty('transition-duration');
target.style.removeProperty('transition-property');
}, duration);
}
var slideToggle = (target, duration = 500) => {
if (window.getComputedStyle(target).display === 'none') {
return slideDown(target, duration);
} else {
return slideUp(target, duration);
}
}
@BigTolly
Copy link

BigTolly commented Mar 9, 2020

How to make the slider squeeze first (slideUp). Do I need to iterate over all the elements and assign them a "style"?

I have a menu, and I want it to be minimized at the beginning.
If I use the slideUp function, then when I switch between the pages of the "jump" menu.

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