Vanilla JS SlideDown/Up
Tags: javascript, tutorial
Published: 2020-06-02 10:54:00

Hey Guys,

For the past years i've been working with JQuery alot, because it allow do things really fast and has full support in most browsers.

Although it is a lightweight library, it may be too much for what we want to achieve.

Couple days ago i published a way of doing <a href="https://dev.to/bmsvieira/vanilla-js-fadein-out-2a6o"> FadeIn/Out</a> in pure javascript, this time, im going to show how to make <b>SlideDown/Up</b>.

Let's get started.

```javascript

  	/* SLIDE UP */
  	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);
  	}

  	/* SLIDE DOWN */
  	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);
    }

    /* TOOGLE */
    var slideToggle = (target, duration = 500) => {
	    if (window.getComputedStyle(target).display === 'none') {
	      return slideDown(target, duration);
	    } else {
	      return slideUp(target, duration);
	    }
  	}
```
That's it, now you can use it like this:

```javascript

// Specify Element and Duration (milliseconds)
slideUp(document.getElementById("target"), 1000);

slideDown(document.getElementById("target"), 1000);

slideToggle(document.getElementById("target"), 1000);

```

I found this code online a few days ago and it works well, I hope it helps someone.

Take a look at my most recent project: <a href="https://github.com/BMSVieira/BVSelect-VanillaJS"> VanillaJS Fully Customizable SelectBoxes</a>

Thank you.