title: Div disappears after page load
body: <p>I am new to jQuery and JavaScript and I'm stuck at a point, so I need suggestions from the intelligent brains sitting out there. I have div which is shown to the user before he logs in.</p>
  
  <pre><code>&lt;div id="login" class = "login"&gt;
  &lt;ul&gt;
    &lt;li&gt;&lt;a href="signup.html"&gt;Login&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I want to replace this div with another div, which is hidden initially, after the user logs in successfully.</p>
  
  <p>Div to be replaced with:</p>
  
  <pre><code>&lt;div id="welcomelogin" class = "login" style="display: none;"&gt;
  &lt;ul&gt;
    &lt;li&gt;&lt;a href="profile.html"&gt;Welcome abc&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I am doing the following in my jQuery (right now I have hardcoded username/password values just to explain my problem).</p>
  
  <p>I am calling auth function on a login button click. After the user clicks the login button, I want the page to reload and the #login div to be replaced with the #welcomeLogin div, so that the new url is shown to the user. But the problem is that the #welcomeLogin div does show up for few seconds, and then goes away because I have <code>location.reload</code> in place.</p>
  
  <p>I also want the page to reload after authentication is successful, and then show the #welcomeLogin div until session remains. All this is done outside <code>$( document ).ready();</code></p>
  
  <pre><code>function auth() {
      var userName = $("#login-username").val();
      var password = $("#login-password").val();
  
      if (userName == 'abc@xyz.com' &amp;&amp; password == '12345') {
          location.reload();
          $("#login").hide();
          if (sessionStorage) {
  
              $("#welcomeLogin").show();
          }
      }
  }
  </code></pre>