title: Toggle Visibility (Automatically causing one div element to hide when another is rendered visible)
body: <p>Essentially what I am trying to do is create a website that has all of its content on the home page but only has some of the content visible at any one time. The way I read to do this is through toggling visibility.</p>
  <p>The problem I am having is that: Assume the home page, when you first visit the website is blank (the way I want it to be). Lets say you click on the &quot;about us&quot; link. All of a sudden the about us section becomes visible (the way I want it to be). Now the problem that I have come across is when I know lets say click on the &quot;products&quot; link, I want the &quot;products&quot; content to become visible and the &quot;about us&quot; content to become invisible again. (Essentially creating the illusion of opening a new page within the same page).</p>
  <p>Here is the code I have come up with so far. I can make certain div elements visible and invisible (<code>onclick</code>) but I can't figure out how to make sure only one div element is visible at any one time.</p>
  <pre><code>&lt;script type=&quot;text/javascript&quot;&gt;
  function toggleVisibility() {
  document.getElementById(&quot;about&quot;).style.display = &quot;&quot;;
  if(document.getElementById(&quot;about&quot;).style.visibility == &quot;hidden&quot; ) {
      document.getElementById(&quot;about&quot;).style.visibility = &quot;visible&quot;;
  }
  else {
  document.getElementById(&quot;about&quot;).style.visibility = &quot;hidden&quot;;
  }
  }
  &lt;/script&gt;
  
  &lt;script type=&quot;text/javascript&quot;&gt;
  function toggleVisibility1() {
  document.getElementById(&quot;products&quot;).style.display = &quot;&quot;;
  if(document.getElementById(&quot;products&quot;).style.visibility == &quot;hidden&quot; ) {
      document.getElementById(&quot;products&quot;).style.visibility = &quot;visible&quot;;
  }
  else {
  document.getElementById(&quot;products&quot;).style.visibility = &quot;hidden&quot;;
  }
  }
  &lt;/script&gt;
  </code></pre>
  <p>The links to make the JavaScript work looks like this:</p>
  <pre><code>&lt; href=&quot;#&quot; onclick=&quot;toggleVisibility();&quot;&gt;About
  
  &lt; href=&quot;##&quot; onclick=&quot;toggleVisibility1();&quot;&gt; Products
          
  </code></pre>