title: Switching between 3 separate div and their contents
body: <p>I am trying to change the content of a div when a link in the submenu is clicked. Each submenu has a different content of div. I used JavaScript before with only two divs switching and it worked fine. I try to implement with three and cannot figure it out. It may be in the if-else logic in the JavaScript or something syntactically wrong with they way I'm calling the switching function. Here is the code for the entire page, css and javascript included. Any insight you can offer would be great! Thanks!</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function SwapDivsWithClick(div1, div2, div3) {
    d1 = document.getElementById(div1);
    d2 = document.getElementById(div2);
    d3 = document.getElementById(div3);
  
    if (d2.style.display == "none" &amp;&amp; d3.style.display != "none") {
      d3.style.display = "none";
      d1.style.display = "block";
      alert("here1");
    } else if (d2.style.display != "none" &amp;&amp; d3.style.display == "none") {
      d2.style.display = "none";
      d1.style.display = "block";
      alert("here2");
    } else if (d2.style.display == "none" &amp;&amp; d3.style.display == "none") {
      d1.style.display = "block";
      alert("here3");
    }
  
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#header {
    width: 100%;
    height: 35px;
    background-color: #303030;
    color: #DE001B;
    line-height: 35px;
    border: solid 1px black;
  }
  #main {
    width: 100%;
    height: 225px;
  }
  #menu {
    float: left;
  }
  #menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
  }
  #menu li {
    width: 75px;
    height: 75px;
    background-color: #303030;
    border-bottom: solid 1px black;
    color: #DE001B;
    text-align: center;
  }
  #menu li:hover {
    background-color: #DE001B;
    color: #303030;
  }
  #menu li:hover a,
  li:hover {
    color: #303030;
  }
  #menu li:hover ul li {
    line-height: 65px;
    color: #DE001B;
    border-left: solid 1px black;
  }
  #menu li:hover ul li:hover a {
    color: #303030;
  }
  #menu li:hover ul li a {
    color: #DE001B;
  }
  #menu li:hover ul {
    border-width: 1px;
    display: block;
    position: fixed;
    left: 78px;
    top: 45px;
    width: 100px;
  }
  #menu li ul {
    display: none;
  }
  #menu a {
    color: #DE001B;
    display: block;
    text-align: center;
  }
  #menu a:link,
  a:visited {
    text-decoration: none;
  }
  #menu img {
    width: 50px;
    height: 50px;
    padding-left: 12px;
    padding-right: 12px;
    padding-top: 3px;
  }
  #content {
    border: solid 1px black;
    width: 100%;
    height: 100%;
  }
  #project1 {
    display: none;
  }
  #project2 {
    display: none;
  }
  #project3 {
    display: none;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="header"&gt;
    Welcome, User
  &lt;/div&gt;
  &lt;div id="main"&gt;
    &lt;div id="menu"&gt;
      &lt;ul&gt;
        &lt;li&gt;
          &lt;img src="https://cdn2.iconfinder.com/data/icons/pittogrammi/142/65-256.png" /&gt;&lt;a href="index.html"&gt;Home&lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;img src="http://cdn.flaticon.com/png/256/46442.png" /&gt;Projects
          &lt;ul&gt;
            &lt;li&gt;&lt;a href="javascript:SwapDivsWithClick('project1','project2','project3')"&gt;Project 1&lt;/a&gt;
            &lt;/li&gt;
            &lt;li&gt;&lt;a href="javascript:SwapDivsWithClick('project2','project1','project3')"&gt;Project 2&lt;/a&gt;
            &lt;/li&gt;
            &lt;li&gt;&lt;a href="javascript:SwapDivsWithClick('project3','project1','project2')"&gt;Project 3&lt;/a&gt;
            &lt;/li&gt;
          &lt;/ul&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;img src="https://cdn0.iconfinder.com/data/icons/management-line/512/all_reports-128.png" /&gt;&lt;a href="#reports"&gt;Reports&lt;/a&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
    &lt;div id="content"&gt;
      &lt;div id="project1"&gt;
        Blah blah blah
      &lt;/div&gt;
      &lt;div id="project2"&gt;
        Blah2 blah2 blah2
      &lt;/div&gt;
      &lt;div id="project3"&gt;
        Blah3 blah3 blah3
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Let me know if you have any questions. I will try to answer them as quickly as possible! Thanks in advance!!</p>