title: Hide one div and Show another div onclick
body: <p>I have two div's in which DIV 1 will be visible by default and if any user clicks on "Click me" link the DIV 1 should get hide and DIV 2 should get visible and after that i don't want to show DIV 1 on any click. DIV 1 should get hide permanently until the page gets refresh.</p>
  
  <p>I worked on one code but i am not able to hide DIV 1 permanently.</p>
  
  <p>Please have a look on this code.</p>
  
  <pre><code>&lt;script&gt;
  function showDivs(start)
  {
   var div;
   while((div = document.getElementById('div' + start)) !== false)
   {
    div.style.display = (div.style.display == 'none') ? '' : 'none';
    start ++;
   }
  }
  &lt;/script&gt; 
  &lt;div class="expressBox"&gt;&lt;div class="expressBtn"&gt;&lt;a href="javascript:;" onclick="showDivs(1);" id="displayText"&gt;Click ME&lt;/a&gt;&lt;/div&gt;
                &lt;div class="txtStyle expressTxt" id="div1"&gt;Use saved addresses and payment options to expendite your purchase.&lt;/div&gt;
                &lt;div id="div2" style="display:none"&gt;
                  &lt;div class="existUserBox"&gt;
                    &lt;div class="userHD"&gt;&lt;strong&gt;New User&lt;/strong&gt;&lt;/div&gt;
  
                      &lt;form name="ZB_ZipForm" action="$field{site_url_secure}/expresscheckout/index.html" method="post"&gt;
                      &lt;div class="txtShipping"&gt;
                        &lt;input type="text" size="13" maxlength="10" name="txt_zip" id="zipcode" placeholder="Zip Code" class="inputSpace" value="" /&gt;
                       &lt;div class="clr"&gt;&lt;/div&gt;
                        Required for Express Checkout&lt;/div&gt;
                        &lt;div class="btnSubmit"&gt;
                          &lt;input type="image" name="btn_ExpressZip" src="$field{path_images}/global/btn-express-submit.png" /&gt;
                        &lt;/div&gt;
                      &lt;/form&gt;
  
                  &lt;/div&gt;
                  &lt;div class="orDivider"&gt;&lt;span&gt;or&lt;/span&gt;&lt;/div&gt;
                  &lt;div class="existUserBox"&gt;
                    &lt;form name="ZB_LoginForm" action="$field{site_url_secure}/expresscheckout/login.html" method="post"&gt;
                      &lt;div class="userHD"&gt;&lt;strong&gt;Existing User&lt;/strong&gt;&lt;/div&gt;
                      &lt;div class="txtShipping"&gt;
                        &lt;input type="text" name="username" size="20" id="username"  placeholder="User Name" value="" class="inputSpace userSpace" /&gt;
                      &lt;/div&gt;
                      &lt;div class="txtShipping"&gt;
                        &lt;input type="password" name="password" id="password"  placeholder="Password" size="20" class="inputSpace userSpace nomargBott" /&gt;
                      &lt;/div&gt;
                      &lt;div class="reqExpChk"&gt;&lt;a class="smallcolor" href="$field{site_url}/reminder/index.html" onMouseOver="status='Click for password help.'; return true;" onMouseOut="status=''; return true;"&gt;Forgot Password ?&lt;/a&gt;&lt;/div&gt;
                      &lt;div class="btnSubmit"&gt;
                        &lt;input type="image" name="btn_Login" src="$field{path_images}/global/btn-express-submit.png" /&gt;
                      &lt;/div&gt;
                    &lt;/form&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
                &lt;/div&gt;
  </code></pre>
  
  <p>I Tried to find this kind of solution but didn't got any.
  Please help me.
  Thanks a lot.</p>