Get nav to show and hide with querySelector and display none/block?

Question

Im trying to make a navbar that shows and hides when you press a button. I get it to show but not hide. If anyone know how i can add a litte fade animation when its shows please let me know.

I have used js and querySelector to get it to shoew.

let button = document.getElementById("button");

let press = document.querySelector('nav').style.display = 'none';
press = true;

button.onclick = () => {

    if(press == true){
        document.querySelector('nav').style.display = 'block';
    }
    else  if(press == false){
        document.querySelectorAll('nav').style.display = 'none';
    }
}

This makes the nav to show but it wont hide again.

Answer 1

Update your press value for the next click.

    if(press == true){
        document.querySelector('nav').style.display = 'block';
    } else {
        document.querySelectorAll('nav').style.display = 'none';
    }
    press = !press;