javascript query selector won't toggle css setting on button click

Question

I'm trying to toggle CSS states to reveal a menu on clicking an animated hamburger button. For some reason, my script won't toggle transform: translateX from 0 to 100% for the nav.

Have tried onClick as well as event listeners. Am I missing something very obvious?

 const navSlide = () => { const burger = document.querySelector('.burger'); const nav = document.querySelector('.nav-links'); burger.addEventListener('click', () => { nav.classList.toggle('.nav-active'); }) } navSlide(); 

 .nav-links{ position: absolute; right: 0px; height: 92vh; top: 8vh; display: flex; flex-direction: column; align-items: center; width: 50%; transform: translateX(100%); transition: transform 0.5 ease-in; } .nav-active { transform: translateX(0%); } 

 <button class="burger" id="burger" onClick="navSlide()"> <div class="burgerdiv"></div> <div class="burgerdiv"></div> <div class="burgerdiv"></div> </button> 

On clicking on the burger button the nav transform state should toggle to reveal the menu. Thank you very much in advance.

Answer 1

You seem to have made a typo, replace nav.classList.toggle('.nav-active'); with nav.classList.toggle('nav-active'); (No dot before the class)