JavaScript Slide Up & Down div From Bottom

This JavaScript code snippet helps you to create slide up & slide down div from bottom functionality. It comes with three methods to slide up/down and toggle the div element. You can integrate this code snippet in an accordion or navigation to smoothly slide up & down the content area.

How to Create Slide Up & Down div From Bottom in JavaScript

1. First of all, create the HTML structure as follows:

 <div id="target"><h1>SlideToggle / SlideUp / SlideDown</h1>
    <p>Pure JavaScript</p>
  </div>
  <div class="triggers">
    <button id="triggerUp" title="Only slides up the target element">slideUp</button>
    <button id="triggerDown" title="Only slides down the target element">slideDown</button>
    <button id="triggerToggle" title="Toggle slide-up and slide-down states for the target">slideToggle</button>
  </div>

2. After that, add the following CSS styles to your project:

@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');

*{margin:0; padding:0;}

body {
  font-family: 'Roboto', sans-serif;
  min-width:350px
  
}

button{ 
  border:none;
  padding:15px 22px;
  margin: 20px 10px 0 10px;
  cursor:pointer;
  background:#ffd000;
  color:#333;
  outline: none;
  transform: scale(1);
  transition: .4s ease;
  border-radius: 25px;
}
button:hover{ 
  transform: scale(1.1);
}

button#triggerToggle{
  background:#faf7e9;
  color:#333;
}

#target {
  padding: 8em 1.5em;
  background-color: #ffd000;
  text-align: center;
  color:#333;
  font-weight: 700;
  border-radius: 0 0 20px 20px;
  box-sizing: border-box;
  display: block;
  max-width:1200px;
  margin: 0 auto;
  color:#333
}

#target h1 {
  max-width: 500px;
  font-size: 1.5;
  margin: 0 auto;
  line-height: 1.618;
  font-weight: regular;
}

.triggers {
  text-align: center;
}

3. Finally, add the following JavaScript code and done.

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);
  }
   let slideToggle = (target, duration = 500) => {
    if (window.getComputedStyle(target).display === 'none') {
      return slideDown(target, duration);
    } else {
      return slideUp(target, duration);
    }
  }
   
// ====  
  
let speedAnimation = 400;
let targetId = document.getElementById("target");

let slideBtnClick = (id, sl) => document.getElementById(id).addEventListener('click', () => sl(targetId, speedAnimation));

slideBtnClick('triggerUp', slideUp);
slideBtnClick('triggerDown', slideDown);
slideBtnClick('triggerToggle', slideToggle);


// =========== old

//   document.getElementById("triggerUp").addEventListener('click', function() {
//   slideUp(document.getElementById("target"), 400);
// });
//   document.getElementById("triggerDown").addEventListener('click', function() {
//   slideDown(document.getElementById("target"), 400);
// });
//   document.getElementById("triggerToggle").addEventListener('click', function() {
//   slideToggle(document.getElementById("target"), 400);
// });

That’s all! hopefully, you have successfully integrated this slide up & down div from bottom code snippet into your project. If you have any questions or facing any issues, feel free to comment below.

Asif Mughal

I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.