title: How to toggle between two divs
body: <p>I am trying to toggle between two divs.  For example, onload, I want the left content to show and the right content will remain hidden.  If I click the right div, I want the left content to hide and the right content to appear and vise versa. I am very new to javascript but here is what I have.  I can't seem to get it to work.  Please help...</p>
  
  <p>Here is my HTML code:</p>
  
  <pre><code>&lt;div onclick="toggle_visibility('left');"&gt;
    Left
  &lt;/div&gt;
  
  &lt;div onclick="toggle_visibility('right');"&gt;
    Right
   &lt;/div&gt;
  
  
   &lt;div id="left" style="display: block;"&gt;
      This is the content for the left side
   &lt;div&gt;
  
   &lt;div id="right" style="display: none;"&gt;
      This is the content for the ride side
   &lt;/div&gt;
  </code></pre>
  
  <p>Here is the Javascript I am using:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
    function toggle_visibility(id) {
       var e = document.getElementById(id);
       if(e.style.display == 'block')
           e.style.display = 'none';
        else
           e.style.display = 'block';
    }
    &lt;/script&gt;
  </code></pre>