title: How to undo javascript function
body: <p>I have a function like so which toggles my dropdown menu. </p>
  
  <pre><code>&lt;div class="module widget-handle mobile-toggle right visible-sm visible-xs"&gt;
    &lt;a id="mobile-nav" href="#"&gt;
      &lt;div class="container1" onclick="myFunction(this)"&gt;
        &lt;div class="bar1"&gt;&lt;/div&gt;
        &lt;div class="bar2"&gt;&lt;/div&gt;
        &lt;div class="bar3"&gt;&lt;/div&gt;.
      &lt;/div&gt;
    &lt;/a&gt;
  &lt;/div&gt;
  &lt;script&gt;
    function myFunction(x) {
      x.classList.toggle('change');
      document.body.style.overflow ='hidden'
    }
  &lt;/script&gt;
  </code></pre>
  
  <p>The last part of it</p>
  
  <pre><code>document.body.style.overflow = 'hidden'
  </code></pre>
  
  <p>Keeps the page from overflowing at the top when the dropdown menu is open. The problem is that when I click on my menu bars, whilst the overflow disappears, clicking on the bars again reveals the page but locks it due to the overflow being hidden. </p>
  
  <p>I'd like to undo </p>
  
  <pre><code>document.body.style.overflow = 'hidden'
  </code></pre>
  
  <p>When the menu is closed and the closest I've got to understanding it is the function <code>doBack</code>. Can I somehow add <code>doBack</code> to my existing function? </p>
  
  <p>Mobile page <a href="https://4309.co.uk" rel="nofollow noreferrer">here</a></p>
  
  <p>It's a WordPress site and the javascript above toggles the dropdown by pressing on the bars. In order to extend the dropdown, I made the class <code>collapse</code> bigger, like so. </p>
  
  <pre><code>@media (max-width: 768px) {
    .collapse {
      position: absolute;
      height: 775px;
      background-color: white;
      z-index: 99999 !important;
      top: 75px;
      left: -50px;
      line-height: 10px;
    }
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="module-group right"&gt;
    &lt;div class="module left"&gt;
      &lt;div class="collapse navbar-collapse navbar-ex1-collapse"&gt;
        &lt;ul id="menu" class="menu"&gt;
          &lt;li id="menu-item-15050" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-15050 dropdown"&gt;
            &lt;a title="Contact" href="url"&gt;Contact
              &lt;ul role="menu" class="dropdow n-menu"&gt;
              &lt;/ul&gt;
            &lt;/a&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  </code></pre>