title: How to use javascript to hide and let divs reappear
body: <p>I am trying to make webpage where there is a div in the center which is being changed, instead of going to different pages.</p>
  
  <p>Ultimately, I would like to have the new div, when clicking on an arrow, to flow from right or left in to the center. But first I would like to make the divs appear and disappear when clicking on the arrows but unfortunately this doesn't work.</p>
  
  <p>This is my javascript:</p>
  
  <pre><code>&lt;script&gt;
  function changeToHome() {
      document.getElementById("mainmain").style.display="block";
      document.getElementById("mainmain2").style.display="none";
      document.getElementById("mainmain3").style.display="none";
      document.getElementById("mainmain4").style.display="none";
  }
  function changeToStudy() {    
      document.getElementById("mainmain").style.display="none";
      document.getElementById("mainmain2").style.display="block";
      document.getElementById("mainmain3").style.display="none";
      document.getElementById("mainmain4").style.display="none";
  }    
  function changeToJob() {    
      document.getElementById("mainmain").style.display="none";
      document.getElementById("mainmain2").style.display="none";
      document.getElementById("mainmain3").style.display="block";
      document.getElementById("mainmain4").style.display="none";
  }
  function changeToContact() {    
      document.getElementById("mainmain").style.display="none";
      document.getElementById("mainmain2").style.display="none";
      document.getElementById("mainmain3").style.display="none";
      document.getElementById("mainmain4").style.display="block";
  }    
  
  function changePageRight() {
      var displayValue5 = document.getElementById('mainmain').style.display;
      var displayValue5 = document.getElementById('mainmain2').style.display;
      var displayValue6 = document.getElementById('mainmain3').style.display;
      var displayValue7 = document.getElementById('mainmain4').style.display;
  
      if (document.getElementById('mainmain').style.display == "block") {
          document.getElementById("mainmain").style.display="none";
          document.getElementById("mainmain2").style.display="block";
      }
      else if (document.getElementById('mainmain2').style.display == "block") { 
          document.getElementById("mainmain2").style.display="none";
          document.getElementById("mainmain3").style.display="block";
      }
      else if (document.getElementById('mainmain3').style.display == "block") {
          document.getElementById("mainmain3").style.display="none";
          document.getElementById("mainmain4").style.display="block";
      }
      else if (displayValue8 == block) {}
  }
  function changePageLeft() {
      var displayValue = document.getElementById('mainmain').style.display;
      var displayValue2 = document.getElementById('mainmain2').style.display;
      var displayValue3 = document.getElementById('mainmain3').style.display;
      var displayValue4 = document.getElementById('mainmain4').style.display;
  
      if (displayValue == "block") { }
      else if (displayValue2 == "block") { 
          document.getElementById("mainmain").style.display="block";
          document.getElementById("mainmain2").style.display="none";
      }
      else if (displayValue3 == "block") {
          document.getElementById("mainmain2").style.display="block";
          document.getElementById("mainmain3").style.display="none";
      }
      else if (displayValue4 === "block") {
          document.getElementById("mainmain3").style.display="block";
          document.getElementById("mainmain4").style.display="none";
      }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>Now I have a few divs that look like this:    </p>
  
  <pre><code>&lt;div id="mainmain4"&gt;
      &lt;img style="width:400px;height:327px;margin-left:auto;margin-right:auto;display:block;"     src="Untitled-22.png" /&gt;
      &lt;h2&gt; My name &lt;/h2&gt;
      &lt;p&gt;Hi,&lt;/p&gt;
      &lt;p&gt;Some text&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>With these css atributes:</p>
  
  <pre><code>#mainmain {
      float: left;
      width: 575px;
      display: block;
      position: relative;
  }
  </code></pre>
  
  <p>And all other divs with <code>display: none;</code> so I can change this to block and the one that was block to none.
  For some reason, after when I click on one button of the menu, which activates a changeToX() function, the arrows work great. But before that, when you first go to the website, it doesn't.</p>
  
  <p>Can someone explain me what I do wrong?</p>