title: Navbar that changes div contents all in one page
body: <p>So to be quick and to the point, I'm attempting to create a small vertical menu on the left side of my screen where when you click on an item in the list, it changes all the contents of a div to the right of it, the 'content' section <strong>but without changing the physical html file.</strong>  Meaning, I'd like to keep it all as one document and do it with JavaScript as I've seen used before. </p>
  
  <p>Here's a 'mock-up' of what I'd like to do:</p>
  
  <p><a href="https://i.stack.imgur.com/NIuQe.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/NIuQe.png" alt="diagram of what the intent is"></a></p>
  
  <p><strong>EDIT/UPDATE</strong></p>
  
  <p>Alright so I've found a solution that works, but I've got 2 things I want to change with it and I'm not sure how.</p>
  
  <pre><code>          function toggle_visibility(id) {
                   var e = document.getElementById(id);
                   if(e.style.display == 'block')
                          e.style.display = 'none';
                   else
                          e.style.display = 'block';
              }
  </code></pre>
  
  <p>I want to add the following:</p>
  
  <ol>
  <li>Only one can display at a time </li>
  <li>Some sort of 'slide' animation for
  changing 'screens'</li>
  </ol>
  
  <p>Here's an example currently on how the links work:</p>
  
  <pre><code>&lt;a onclick="toggle_visibility('2');"&gt;Testing&lt;/a&gt;
  
  &lt;div style="display:none;" id="2"&gt;
  testing for page 2
  &lt;/div&gt;
  </code></pre>