title: How to simplify the same classes on click without copy pasting the same code?
body: <p>I have 2 click event listeners one is for toggle and second for remove class. Now, I don't want to repeat my code over and over again but instead, I would like to have a clean &amp; dry approach to the same goal.</p>
  
  <p>As you can see i have some classes but the only actual difference is toggle and remove.
  Is there a cleaner way of doing such a thing?</p>
  
  <p>My JS:</p>
  
  <pre><code>    const onNavOpen = e =&gt; {
          e.preventDefault();
          body.classList.toggle('nav-body-is-open');
          body.classList.toggle('bg-overlay');
          navigationHamburger.classList.toggle('active');
          navigationMenu.classList.toggle('nav--open');
      };
  
      const onNavClose = e =&gt; {
          e.preventDefault();
          if (
              body.classList.contains('nav-body-is-open') &amp;&amp;
              e.keyCode === 27
          ) {
              body.classList.remove('nav-body-is-open');
              body.classList.remove('bg-overlay');
              navigationHamburger.classList.remove('active');
              navigationMenu.classList.remove('nav--open');
          }
      };
  </code></pre>