title: Switch visibility between two divs
body: <p>I want to switch/toggle visibility between div id1 and div id2.  I want div id2 to display by default when the page loads and when I click on a link I want div id1 to replace div id2.  I have tried a few different methods, even played around with it on jsfiddle a bit but I can't figure out what I am missing here.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;a href="#id" onclick="toggle_visibility(id1, id2);"&gt;Change Payment Method&lt;/a&gt;
  &lt;div id="id1" style="display: none"&gt;&lt;p&gt;test 1&lt;/p&gt;&lt;/div&gt;
  &lt;div id="id2"&gt;&lt;p&gt;test 2&lt;/p&gt;&lt;/div&gt;
  </code></pre>
  
  <p>JavaScript:</p>
  
  <pre><code>function toggle_visibility(id1, id2) {  
  var e = document.getElementById(id1);
  var e2 = document.getElementById(id2);
  if(e.style.display == 'block') {                
    e.style.display = 'block';             
    e2.style.display = 'none';
  }
  else {
    e.style.display = 'none';            
    e2.style.display = 'block';
  }              
  }
  </code></pre>