Toggle Class in Javascript
Toggle Class means, if the class name already exists then it can be removed or if the class name not present then class name to be added.
Toggle Class
function toggleMenu(){ document.querySelector(".menu").classList.toggle('hide'); }Try it Yourself
The following example shows, create the hide and show menu with Javascript toggle Class.
Example
<html> <head> <style> .menu{ padding:10px; width:100px; border:1px solid #ccc; margin-top:10px; } .menu a{ display:block; margin-bottom:10px; } .hide{ display:none; } </style> </head> <body> <input type='button' value='Menu' onclick='toggleMenu()'> <div class='menu hide'> <a href='#'>Home</a> <a href='#'>Product</a> <a href='#'>About Us</a> <a href='#'>Contact Us</a> </div> <script> function toggleMenu(){ document.querySelector(".menu").classList.toggle('hide'); } </script> </body> </html>Try it Yourself