This is what I currently have (I was having issues with JQuery so I decided to do it this way):

var active = false;
function asd(){

    var wrapper = document.getElementById('nav-wrapper');

    if(active){
        wrapper.style.animationDirection = "reverse";
        wrapper.style.display = "none";
    } else {
        wrapper.style.display = "block";
        wrapper.style.animationDirection = "normal";
    }
    
    active = !active;
}


So a little bit of context for my code:

#nav-wrapper -- The ID of a div that just contains every single Navbar list item/anchor

The animation -- A CSS keyframe that runs an animation, setting the height from 0 to 230px in 1 second

active -- A boolean value keeping track of whether or not the navbar menu is down

This function is called in the onclick of a div that I've created and DOES get called correctly. The false section is called correctly, actually. The animation runs very smoothly in the expanding, however when I want to retract it, it doesn't play an animation (but it DOES go through the Truth section). I actually think it DOES play the animation, however something might be wrong with how I have it set up.

Any further questions? Need to see more to answer the question? Just let me know!