Others

Others


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

Demo