Javascript slideUp / slideDown / one button

Question

I am having trouble of solving a problem. I have 2 buttons, the one is for slideUp and the other is for slideDown. What i would like to do is to have one button that toggle instead of having 2.

Thanks.

I have this code in html:

<div id = "box">Show / Hide</div>
  <button onclick="slideUp('box');">Slide Up</button>
  <button onclick="slideDown('box');">Slide Down</button>

and i have this code in css:

body{
  background:grey;
}

#box{
  width:400px;
  height:400px;
  background:orange;
  margin:0 auto;
  margin-top:3%;
  overflow:hidden;
}

and my javascript code is this:

function slideUp(el) {
  var elem = document.getElementById(el);
  elem.style.transition = "all 2s ease-in-out";
  elem.style.height = "0px";
}
function slideDown(el) {
  var elem = document.getElementById(el);
  elem.style.transition = "all 2s ease-in-out";
  elem.style.height = "400px";
}

Answer 1

You can create CSS class with the height:0 rule, and toggle that class with JS :

 var elem = document.getElementById("box"); function slide() { elem.classList.toggle('hide'); } 

 .box { width: 400px; height: 400px; overflow: hidden; background: orange; margin: 0 auto; transition: all 0.4s ease-in-out; } .hide { height: 0; } 

 <button onclick="slide();">Slide Toggle</button> <div id="box" class="box">Show / Hide</div> 

Answer 2

Put the css properties into a class, add the class to your element, and then toggle the class that affect the height on/off of the element using classList.toggle()

 function slideToggle(el) { var elem = document.getElementById(el); elem.classList.toggle("open"); } 

 body{ background:grey; } #box{ width:400px; background:orange; margin:0 auto; margin-top:3%; overflow:hidden; } .slider { transition:all 2s ease-in-out; height:0px; } .slider.open { height:400px; } 

 <div id = "box" class="slider">Show / Hide</div> <button onclick="slideToggle('box');">Slide</button> 

Answer 3

You can create class .slideup

#box.slideUp {
    height:0;
}

And toggle this class on #box:

function toggle(){
    document.getElementById('box').classList.toggle('slideUp')
}

Example here

Answer 4

Best way is to toggle a class on the box when the button is clicked. That class will set the height on the box to 0, and so the transition will take effect and smooth the change.

JS

document.querySelector('.js-button').addEventListener('click', function (event) {
  document.querySelector('.box').classList.toggle('box-closed')
});

CSS

.box-closed {
  height: 0px;
}

Demo

Answer 5

I like to track state with a simple boolean, a bit like so :

var _bool = false;
var _box = document.getElementById('box');
var _clik = document.getElementById('clik');

_clik.addEventListener('click', function(){
  if (_bool){
      _box.style.height = '100px';
      _bool = false;
   } else {
      _box.style.height = '10px';
      _bool = true;
   }

});

Here's a Fiddle

Importantly, we're not storing state on the DOM, and so once your app gets complicated, it will stay performant. You, obviously, can use these two states in whatever way you like (animation, css transition, etc);

Answer 6

Apply transition to #box via css stylesheet;

 #box {
  -webkit-transition: all 2s ease-in-out;
  -ms-transition: all 2s ease-in-out;
  transition: all 2s ease-in-out;
  width:400px;
  height:400px;
  background:orange;
  margin:0 auto;
  margin-top:3%;
  overflow:hidden;
}

I am trying to get more familiar with modules today, so this is a modular approach - solution

  var Dropdown = function(el) {

      var is_open = false;
      var elem = document.querySelector(el);  
      // in case you cannot set transition via stylesheet 
      elem.style.transition = "all 2s ease-in-out";

      function slideUp() {
        elem.style.height = "0px";     
        is_open = false;
      }
      function slideDown() {
        elem.style.height = "400px";
        is_open = true;
      }
      function init() {
        if(is_open) {
          slideUp();
        }else{
          slideDown();
        }
      }
      return {
        init : init
      }
  };

  myDropdown = Dropdown('#box');
  document.querySelector('#your-button').addEventListener('click',  myDropdown.init);

Answer 7

Make it shorter:

<button onclick="slide()"></button>

<div id="box"></div>

JS: slide(){document.getElementById("box").classList.toggle('hide');}

#box {
  overflow: hidden;
  transition: all .5s ease-in-out;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
}
.hide {
  height: 0px !important;
}