javascript - Toggling class doesn't trigger transition

Question

This question already has answers here: question from:https://stackoverflow.com/questions/65836890/toggling-class-doesnt-trigger-transition

Answer 1

Not only the comas in the HTML need to be fixed.

You need to specify the property on which the transition wil apply... If not sure, use all.

For the transition to take effect, the height has to be defined in the #expSect1 rule... Because the transition need a numeric value to start with. auto does not work.

Additionally, an id is more specific than a class... So you need to use both the class and the id on the rule to be toggled.

See the below working snippet.

function expandFunction(elementID) {
  let element = document.getElementById(elementID);
  element.classList.toggle("setHeightStyle");
}

#expSect1.setHeightStyle {
  height: 60px;
}

#expSect1 {
  overflow: hidden;
  cursor: pointer;
  height: 200px;
  transition: all 1s;
  background: blue;
}

<div class="setHeightStyle" id="expSect1" onclick="expandFunction(id)">
  <h1>Title</h1>
  <br>
  <p>Content!<br>More content!</p>
</div>