Javascript slideUp/slideDown/jedno tlačítko

Mám problém s řešením problému. Mám 2 tlačítka, jedno je pro slideUp a druhé pro slideDown. Co bych chtěl udělat, je mít jedno tlačítko, které přepíná místo toho, abych měl dvě.

Děkuji.

Mám tento kód v HTML:

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

a mám tento kód v CSS:

body{
  background:grey;
}

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

a můj JavaScriptový kód je tento:

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";
}

Odpověď č. 1

Můžete vytvořit CSS třídu s pravidlem height:0 a tuto třídu přepínat pomocí 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>

Odpověď č. 2

Vložte vlastnosti CSS do třídy, přidejte třídu ke svému prvku a poté přepínejte třídu, která ovlivňuje výšku, zapnuto/vypnuto pomocí 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>