Javascript slideUp/slideDown/en knapp

Jeg har problemer med å løse et problem. Jeg har 2 knapper, den ene er for å slideUp og den andre er for å slideDown. Det jeg ønsker å gjøre er å ha en knapp som veksler i stedet for å ha 2.

Takk.

Jeg har denne koden i HTML:

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

og jeg har denne koden i CSS:

body{
  background:grey;
}

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

og min JavaScript-kode er dette:

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

Svar #1

Du kan lage CSS klasse med height:0-regelen, og veksle den klassen med 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>

Svar #2

Legg CSS-egenskapene inn i en klasse, legg til klassen på elementet ditt, og veksle deretter klassen som påvirker høyden av elementet av/på ved å bruke 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>