title: Show/Hide Multiple Divs Javascript
body: <p>Looking for a good JavaScript to help me hide/show multiple divs with a button click not an a href click so I can use it in blogger.
  I've been looking for an answer for a while now and have been unable to find a good one that uses JavaScript and/or CSS. I am a bit of a novice so bear with me.
  Following is my code that works but I would like to simplify it and make it work so that it will close the div when I click the appropriate button again.</p>
  
  <p>css</p>
  
  <pre><code>    &lt;head&gt;
      &lt;style&gt;
      #myDIV1 {
        width: 150px;
        height: 150px;
        background-color: lightblue;
        display: none;
      }
  
  
      #myDIV2 {
        width: 150px;
        height: 150px;
        background-color: lightblue;
        display: none;
      }
  
  
      #myDIV3 {
        width: 150px;
        height: 150px;
        background-color: lightblue;
        display: none;
      }
  
  
      #myDIV4 {
        width: 150px;
        height: 150px;
        background-color: lightblue;
        display: none;
      }
  
      &lt;/style&gt;
      &lt;/head&gt;
  </code></pre>
  
  <p>I know there is an easier way but this is the only way that I can find that works for what I want it to do for the most part</p>
  
  <p>html</p>
  
  <pre><code>    &lt;body&gt;
  
        &lt;p&gt;Click button to see div.&lt;/p&gt;
  
        &lt;button onclick="myFunction1()"&gt;One&lt;/button&gt;
  
        &lt;button onclick="myFunction2()"&gt;Two&lt;/button&gt;
  
        &lt;button onclick="myFunction3()"&gt;Three&lt;/button&gt;
  
        &lt;button onclick="myFunction4()"&gt;Four&lt;/button&gt;
  
      &lt;div id="myDIV1"&gt;
  
        This is the div1 element.
  
      &lt;/div&gt;
  
      &lt;div id="myDIV2"&gt;
  
        This is the div2 element.
  
      &lt;/div&gt;
  
      &lt;div id="myDIV3"&gt;
  
        This is the div3 element.
  
      &lt;/div&gt;
  
      &lt;div id="myDIV4"&gt;
  
        This is the div4 element.
  
      &lt;/div&gt;
  </code></pre>
  
  <p>Javascript</p>
  
  <pre><code>    &lt;script&gt; 
  
        function myFunction1() {
  
          document.getElementById("myDIV1").style.display = "block";
  
          document.getElementById("myDIV2").style.display = "none";
  
          document.getElementById("myDIV3").style.display = "none";
  
          document.getElementById("myDIV4").style.display = "none";
  
      }
  
      function myFunction2() {
  
        document.getElementById("myDIV1").style.display = "none";
  
        document.getElementById("myDIV2").style.display = "block";
  
        document.getElementById("myDIV3").style.display = "none";
  
        document.getElementById("myDIV4").style.display = "none";
  
      }
  
      function myFunction3() {
  
        document.getElementById("myDIV1").style.display = "none";
  
        document.getElementById("myDIV2").style.display = "none";
  
        document.getElementById("myDIV3").style.display = "block";
  
        document.getElementById("myDIV4").style.display = "none";
  
      }
  
      function myFunction4() {
  
        document.getElementById("myDIV1").style.display = "none"; 
  
        document.getElementById("myDIV2").style.display = "none";
  
        document.getElementById("myDIV3").style.display = "none";
  
        document.getElementById("myDIV4").style.display = "block";
  
      }
  
      &lt;/script&gt;
  </code></pre>
  
  <p>Any help would be appreciated thanks in advance.</p>