Javascript slideUp / slideDown / one button -

i having trouble of solving problem. have 2 buttons, 1 slideup , other slidedown. have 1 button toggle instead of having 2.

thanks.

i have code in html:

<div id = "box">show / hide</div>   <button onclick="slideup('box');">slide up</button>   <button onclick="slidedown('box');">slide down</button> 

and have code in css:

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

and javascript code 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"; } 

you can create css class height:0 rule, , toggle class js:

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

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

<div id="box" class="box">show / hide</div>  <button onclick="slide();">slide toggle</button>