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! :)

DivisionByZero · Answer 1 · 2020-10-27T17:12:11.520

Long story short: You can't animate the display property of an HTML Element. Use the opacity property instead.

Other solutions in this answer.

// Toggle all buttons texts

function change(button) {
  var x = document.querySelectorAll(".button");
  for (let 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 (let i = 0; i < x.length; i++) {
    if (x[i].style.opacity === "0") {
      x[i].style.opacity = "1";
    } else {
      x[i].style.opacity = "0";
    }
  }
}

<!-- Inserting default transition for divs -->

<style>
  div {
    transition: 0.5s;
  }
</style>

<!--Inserting 3 buttons-->

<input onclick="change();showhide()" type="button" value="Verstecke Features" class="button"></input>
<input onclick="change();showhide()" type="button" value="Verstecke Features" class="button"></input>
<input onclick="change();showhide()" type="button" value="Verstecke Features" class="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>

Some additional info:

don't give multiple HTML tags the same id, use a class instead
if your divs are visible per default, your tags should say "Verstecke Features", so the user knows what your button WILL do

Thanks for your reply! I think the problem what I will get here is, that the divs are still there. As I need this for a responsible layout, where the users can show on mobile the features if they want, this solution would still show the divs, right? just that they are kind of "hidden"!? Is there a solution to completly close and open them, like an accordion? That would be awesome! Thanks for you fast help! :) — Artan, Oct 27 '20 at 18:00

score 1 · Accepted Answer · answered Oct 27 '20 at 18:39

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');
  }
}

Hey, thanks. This was a good start! I had to work around a bit as I first show the divs and hide them first. But I got it working with your help! Thanks a lot! :) — Artan, Oct 31 '20 at 12:59

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

2 Answers2