Reverse a CSS animation without jquery

Question

I'm making a dropdown menu that should slide into view on click. I want to make it slide back up on a second click, but have been struggling to figure out how to do so. Most of the answers I've found online involve jQuery, but I am hoping to accomplish this with vanilla js.

My CSS:

.post-more-dropdown {
    background-color: #f8f9fa;
    display: block;
    position: absolute;
    right: 0px;
    top: 60px;
    min-width: 80px;
    animation-name: dropdown;
    animation-play-state: paused;
    animation-fill-mode: backwards;
    animation-duration: 0.7s;
    a {
      display: block;
      padding-left: 10px;
      padding-top: 10px;
    }
    a:hover {
      background-color: #555555;
      color: white;
      cursor: pointer;
    }
  }

@keyframes dropdown {
  0% {
    max-height: 0px;
    opacity: 0;
  }
  100% {
    max-height: 200px;
    opacity: 1;
  }
}

My javascript:

function post_more_dropdown(post_id) {
  dropdown = document.querySelector(`#post-more-dropdown-${post_id}`);
  dropdown.style.animationPlayState = "running";
}

This works perfectly to get the dropdown to run on click, but I'm struggling to figure out how to reverse it on the second click. I was thinking I could create a new @keyframes dropdown-reverse animation and add it to the class, but then I realized I can't control two animations under one class with JS. I was thinking I could also create two different classes and add/remove those classes with JS along with controlling two different animations, but I feel like there's got to be a more elegant solution that I'm missing.

I have a feeling that animation-direction is going to be part of the answer, but I haven't quite figured out how that will work for this.

Answer 1

Use the following CSS, change class using JavaScript.

function post_more_dropdown(post_id) {
  dropdown = document.querySelector(`#post-more-dropdown-${post_id}`);
  if (dropdown.classList.contains('dropdown-animate-forward')) {
    dropdown.classList.add('dropdown-animate-backward');
    dropdown.classList.remove('dropdown-animate-forward');
  } else {
    dropdown.classList.add('dropdown-animate-forward');
    dropdown.classList.remove('dropdown-animate-backward');
  }
}

setInterval(function() {
  post_more_dropdown(1)
}, 1000);

.post-more-dropdown {
  background-color: #f8f9fa;
  display: block;
  position: absolute;
  right: 0px;
  top: 60px;
  min-width: 80px;
  a {
    display: block;
    padding-left: 10px;
    padding-top: 10px;
  }
  a:hover {
    background-color: #555555;
    color: white;
    cursor: pointer;
  }
}


/* forward animation */

.dropdown-animate-forward {
  animation-name: dropdownForward;
  animation-fill-mode: backwards;
  animation-duration: 0.7s;
}

@keyframes dropdownForward {
  0% {
    max-height: 0px;
    opacity: 0;
  }
  100% {
    max-height: 200px;
    opacity: 1;
  }
}


/* backward animation */

.dropdown-animate-backward {
  animation-name: dropdownBackward;
  animation-fill-mode: forward;
  animation-duration: 0.7s;
}

@keyframes dropdownBackward {
  0% {
    max-height: 200px;
    opacity: 1;
  }
  100% {
    max-height: 0px;
    opacity: 0;
  }
}

<div id="post-more-dropdown-1" class="post-more-dropdown">Post more</div>