Animating elements height on hover

Question

I'm trying to animate the height of some elements on hover. I used the max-height to manipulate the animation as you can see here:

.container {
  height: auto;
}

.hiddenContent {
  max-height: 0px;
  overflow: hidden;
  transition: max-height 1s ease;
}

.container:hover>.hiddenContent {
  max-height: 250px;
  transition: max-height 1s ease;
}

<div class="container">
  <h2>Hover me to expand</h2>
  <div class="hiddenContent">
    <h4>Hidden title</h4>
    <p>Hidden content lorem ipsum sid dolor amet</p>
  </div>
</div>

<div class="container">
  <h2>Hover me to expand</h2>
  <div class="hiddenContent">
    <h4>Hidden title</h4>
    <p>Hidden content lorem ipsum sid dolor amet</p>
  </div>
</div>

<div class="container">
  <h2>Hover me to expand</h2>
  <div class="hiddenContent">
    <h4>Hidden title</h4>
    <p>Hidden content lorem ipsum sid dolor amet</p>
  </div>
</div>

The problem appears when I navigate from an element to an other: the 2 animation (the opening-one and the closing-one) are not simultaneous. The closing-one starts when the opening-one finishes. How can I solve this?

Thank you

Answer 1

that's because you're animating max-height. Here's a good explanation I found:

CSS transition simultaneous

just try to animate height

.container {
  height: auto;
}

.hiddenContent {
  height: 0px;
  overflow: hidden;
  transition: height 1s ease;
}

.container:hover .hiddenContent {
  height: 150px;
  transition: height 1s ease;
}