title: How to hide/show div tags using JavaScript?
body: <p>Basically, I'm trying to make a link that, when pressed, will hide the current body div tag and show another one in its place, unfortunately, when I click the link, the first body div tag still appears. Here is the HTML code:</p>
  
  <pre><code>&lt;div id="body"&gt;
      &lt;h1&gt;Numbers&lt;/h1&gt;
  &lt;/div&gt;
  &lt;div id="body1"&gt;
      Body 1
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is the CSS code:</p>
  
  <pre><code>#body {
      height: 500px;
      width: 100%;
      margin: auto auto;
      border: solid medium thick;
  }
  
  #body1 {
      height: 500px;
      width: 100%;
      margin: auto auto;
      border: solid medium thick;
      display: hidden;
  }
  </code></pre>
  
  <p>Here is the JavaScript code:</p>
  
  <pre><code>function changeDiv() {
    document.getElementById('body').style.display = "hidden"; // hide body div tag
    document.getElementById('body1').style.display = "block"; // show body1 div tag
    document.getElementById('body1').innerHTML = "If you can see this, JavaScript function worked"; // display text if JavaScript worked
  }
  </code></pre>
  
  <p>NB: CSS tags are declared in different files</p>