title: Javascript toggle style display inside CSS media query breaks outside media query display
body: <p>I have an interactive element displayed only within the CSS media query which toggles the display of another element (the nav element) from none to block. Outside the media query (any display width greater than 580px) the nav element display is set as block. When I toggle the display within the media query and set the nav to display none, then re-size the browser to a width greater than 580px the nav element is still set to display none. How can I make so that toggling the display of nav within the media query will have no impact on its display outside of the media query?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>&lt;!-- Toggle Display
   // click on the element
   function toggle(e, id) {
    var el = document.getElementById(id);
    
    el.style.display = (el.style.display == 'none' || el.style.display == '') ? 'block' : 'none';
  
    // save it for hiding
    toggle.el = el;
    
  
    // stop the event here
    if (e.stopPropagation) e.stopPropagation();
    e.cancelBubble = true;
    return false;
   }
  
   // click outside the element
   document.onclick = function() {
    if (toggle.el) {
     toggle.el.style.display = 'none';
    }
   }
  //--&gt;</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>nav {
    color: white ;
    float: right ;
    margin: 0 10px 0 0 ;
    display: block ;
  
  }
  
  
  nav a {
    margin-right: 25px ;
    padding: 5px 4px 2px 4px ;
    display: inline-block ;
  }
  
  .nav-text { 
    display: none ; /* replaced by icons */
    font-size: 18px ;
  }
  
  @media all and (max-width: 580px) {
     
     nav {
       display: none ;
       float: left ;
       width: 100% ;
       margin: 3px 0 0 0 ;
       clear: both ;
     }
     
     .menu {
       display: block ;
    }
    
      nav a {
       display: block ;
       background: gray ;
       color: white ;
       padding: 10px 20px ;
       width: 100% ;
       border-bottom: 1px solid #ccc ;
    }
    
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;header&gt;
  
    &lt;div onclick="toggle(event, 'nav')" class="menu" tabindex=0&gt; 
  
      &lt;!-- Menu icon --&gt;
   
    &lt;/div&gt;
  
    &lt;nav id="nav"&gt;
      &lt;a href="/"&gt;&lt;span class="nav-text"&gt;Home&lt;/span&gt;&lt;/a&gt;
      &lt;a href="#"&gt;&lt;span class="nav-text"&gt;About&lt;/span&gt;&lt;/a&gt;
    &lt;/nav&gt;
  
  &lt;/header&gt;</code></pre>
  </div>
  </div>
  </p>