Transition accordion: roll down works, but not roll back up

Question

I am trying to make the accordion roll down, when selected, and roll back up when closed. It rolls down, but when closed it just closes without transition.

I tried adding max-height to the elements, and then using transition: max-height 1s ease-in/ease-out, but it doesn't work for rolling back up :(

I guess I am doing something wrong, but I am still new at web-development, so it's a bit hard to see my own mistakes :P

$('.topic-container').on('click', function() {
  if ($(this).hasClass('active')) {
    $(this).removeClass('active')
    $(this).addClass('closed')
  } else {
    $(this).addClass('active')
    $(this).removeClass('closed')
      .siblings()
      .removeClass('active')
      .addClass('closed')
  }
});

.accordion .content {
  position: relative;
  height: 0;
  font-size: 20px;
  text-align: justify;
  width: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  max-height: 0;
  transition: max-height 1s ease;
}

.accordion .topic-container.active .content {
  height: 100%;
  max-height: 1000px;
  transition: max-height 1s ease-in;
}

.accordion .topic-container.closed .content {
  height: 0;
  max-height: 0;
  transition: max-height 1s ease-out;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="accordion-body">
  <div class="accordion">
    <div class="topic-container closed">
      <div class="label">
        Header
      </div>
      <div class="content">
        Inside the accordion tab
      </div>
    </div>
  </div>
</div>

score 0 · Answer 1 · answered Mar 09 '22 at 09:12

Instead of using max-height 1s ease-out you have to use max-height 1s, height 1s ease-out for transition property

.accordion .topic-container.active .content {
    height: 100%;
    max-height: 1000px;
    transition: max-height 1s, height 1s ease-in;
}

.accordion .topic-container.closed .content {
    height: 0;
    max-height: 0;
    transition: max-height 1s, height 1s ease-out;
}

Transition accordion: roll down works, but not roll back up

1 Answers1