title: How Can I make my header disappear and reappear by clicking a button and also have the button change my page background
body: <p>My HTML:</p>
  
  <pre><code>    &lt;!doctype html&gt;
      &lt;html&gt;
      &lt;head&gt;
      &lt;title&gt;Public Vision&lt;/title&gt;
      &lt;link rel="stylesheet" type="text/css" title="backbone" href="backbone.css"&gt;
      &lt;link rel="alternative stylesheet" type="text/css" title="alt" href="alt.css"&gt;
      &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="script.js"&gt;&lt;/script&gt;
      &lt;/head&gt;
      &lt;body class="style2"&gt;
      &lt;div id="header" class="style2"&gt;&lt;div id="header2" class="style2"&gt;Public Vision&lt;/div&gt;&lt;/div&gt;
      &lt;iframe width="640" height="400" 
       src="https://www.youtube.com/embed/videoseries?list=PLX9_I-EOJPdFuOjcI2zkmTck55homHEBE" 
       frameborder="2" allowfullscreen&gt;&lt;/iframe&gt;
  
      &lt;input id="showHideContainer" type="image" src="off.jpeg " height="3%" width="2%" alt="On" onclick="toggle()";&gt;
  
      &lt;script&gt;
      function toggle(){
  $('body').toggleClass('style2');
      }
      &lt;/script&gt;
      &lt;script&gt;
      document.getElementById('showHideContainer').onclick = function() {
      divTest = document.getElementById('header');
      if (divTest.style.display === "none") {
      divTest.style.display = 'block';
      }
      else {
      divTest.style.display = "none";
       }
      }
      &lt;/script&gt;
      &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>
  
  <p>My CSS:</p>
  
  <pre><code>     #header {height: 15%; width: 100%; background-color: white; z-index: 2; position: fixed; right:0; top:0;
  
  
      box-shadow: 0 4px 4px -2px #232323;
     -moz-box-shadow: 0 4px 4px -2px #232323;
     -webkit-box-shadow: 0 4px 4px -2px #232323;
     }   
  
     #header2{height: 15%; width: 100%; position: fixed; color:grey; opacity:  0.6; text-align: center; z-index: 4; font-size: 30px; margin-top: 2.5%;    background-color:clear;}
     iframe {display:block; margin: 0 auto; margin-top: 17%;}
  
  
     body{
     background-color:grey; z-index:3;
        }
     body.style2{
      background-color:white; z-index:3;
       }
  </code></pre>
  
  <p>Currently, the image I have  now, when clicked makes the header disappear.
  any ideas on how I can make the image make the header disappear and the background change color? Really hitting a brick wall here. Thanks in advance!</p>