title: Toggle OnClick to dynamically change CSS
body: <p>I have a button to show and hide certain part by calling CSS stylesheet change with onClick button. I want the same onclick to toggle in between hide and show. And it is hiding the content with <code>.HeaderContainer {display:none;}</code> but can I get help how to toggle it ? 
  I want same button if click again then it should override the .HeaderContainer  with just {} ; </p>
  
  <p>I have made the code like this to hide. I need how the same button can show this again.</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      function loadToggleAction() {
      var sheet = document.createElement('style')
      sheet.innerHTML = ".HeaderContainer {display:none;}";
      document.body.appendChild(sheet);
      }
    &lt;/script&gt;
    &lt;form&gt;
      &lt;input type="button" id="dxp" class="button"  value="Hide top Pane" onclick='javascript: loadToggleAction();' /&gt;
    &lt;/form&gt;
  </code></pre>