Toggle the divs for show and hide slowly via Javascript or CSS

Question

I made my first steps with Javascript. Now I have a problem with an animation. My codes are working at the moment as they should. But I can´t figure out how I can make the divs "role out" an "role in" slowly and not instantly.

This is what I received until now. Tried to put .style.transition = "all 2s"; behind var x = document.querySelectorAll("#toggle-div"); like this var x = document.querySelectorAll("#toggle-div").style.transition = "all 2s"; but it doesn´t really work.

I would like that every single div (3 divs) toggle slowly and not like a snap.

Here´s what my code looks at the moment:

// Toggle all buttons texts

function change() {
  var x = document.querySelectorAll("#button");
  var i;
  for (i = 0; i < x.length; i++) {
    if (x[i].value == "Zeige Features") {
      x[i].value = "Verstecke Features";
    } else {
      x[i].value = "Zeige Features";
    }
  }
}

// Toggle show and hide divs

function showhide() {
  var x = document.querySelectorAll("#toggle-div");
  var i;
  for (i = 0; i < x.length; i++) {
    if (x[i].style.display === "block") {
      x[i].style.display = "none";
    } else {
      x[i].style.display =
        "block";
    }
  }
}

<!--Inserting 3 buttons-->

<input onclick="change();showhide()" type="button" value="Zeige Features" id="button"></input>
<input onclick="change();showhide()" type="button" value="Zeige Features" id="button"></input>
<input onclick="change();showhide()" type="button" value="Zeige Features" id="button"></input>

<!--Inserting 3 divs-->

<div id="toggle-div"> div 1 </div>
<div id="toggle-div"> div 2 </div>
<div id="toggle-div"> div 3 </div>

Hope u can help! :)

Answer 1

HTML:

<!--Inserting 3 buttons-->

<input onclick="change();showhide()" type="button" value="Zeige Features" id="button"></input>
<input onclick="change();showhide()" type="button" value="Zeige Features" id="button"></input>
<input onclick="change();showhide()" type="button" value="Zeige Features" id="button"></input>

<!--Inserting 3 divs-->

<div class="toggle-div">div 1</div>
<div class="toggle-div">div 2</div>
<div class="toggle-div">div 3</div>

CSS:

div.toggle-div {
  transition: 1s ease-out;
  height: 50px;
  overflow: hidden;
}

div.hidden {
  height: 0;
}

JS:

function change() {
  var x = document.querySelectorAll("#button");
  var i;
  for (i = 0; i < x.length; i++) {
    if (x[i].value == "Zeige Features") {
      x[i].value = "Verstecke Features";
    } else {
      x[i].value = "Zeige Features";
    }
  }
}

// Toggle show and hide divs

function showhide() {
  var x = document.querySelectorAll(".toggle-div");
  for (var i = 0; i < x.length; i++) {
    x[i].classList.toggle('hidden');
  }
}