title: How to show DIV only after receiving reply message from server?
body: <p>I want to show a particular DIV only after i get the response from my server.</p>
  <p>What I am trying to do is, a password recovery function for my users. I get their registered email ID, and then I checked it with my database. If it is present in my database, I send a message back inside a div, stating the password has been sent to your mail ID. If it is an un-registered email ID, I send a different message stating email id not registered.</p>
  <p>Here are my two divs:</p>
  <p>DIV To get my users email ID</p>
  <pre><code>&lt;div  id=&quot;fgpass&quot; &gt;
                    
                      &lt;div id=&quot;newpass&quot;&gt;
                          &lt;div style=&quot;position: absolute;top: 10%;left: 10%;&quot;&gt;
                              &lt;center&gt;&lt;h2&gt;PASSWORD RECOVERY&lt;/h2&gt;&lt;/center&gt;
                              &lt;h4&gt; Enter Your Registered&lt;/h4&gt; 
                          
                        
                    &lt;h4&gt;E-Mail Address :&lt;/h4&gt;
                          
                      &lt;f:view&gt;
                          &lt;h:form&gt;
                           &lt;center&gt;
                               &lt;h:inputText id=&quot;cmailid&quot; required=&quot;true&quot; value=&quot;#{forgotPass.mailid}&quot;/&gt;
                               &lt;h:commandButton value=&quot;Submit&quot;   action=&quot;#{forgotPass.fpass}&quot;&gt;
  
                              &lt;/h:commandButton&gt;
                              
                             
                      
                           &lt;/center&gt;
                     
                     &lt;/div&gt;
                      &lt;/div&gt;
                               
                              &lt;/h:form&gt;
                  &lt;/div&gt;
                            
              &lt;/div&gt;
  </code></pre>
  <p>DIV to show the server response message</p>
  <pre><code>  &lt;div id=&quot;msg&quot; onclick=&quot;$('#msg').hide();&quot;&gt;
              &lt;div style=&quot;position: absolute;top: 20%;left: 2%;&quot;&gt;
                     &lt;span style=&quot;font-size: medium;&quot;&gt;
                           &lt;h:outputLabel  value=&quot;#{forgotPass.finalresult}&quot;/&gt;
                     &lt;/span&gt;
              &lt;/div&gt;
      &lt;/div&gt;  
  </code></pre>
  <p>My CSS</p>
  <pre><code>#fgpass {
      position: absolute;
      left: 65%;
      top: 4%;
      
      border-color: #009900;
      border-width: 3px;
      border-radius: inherit;
     z-index: 800;
     
  }
  #newpass{
     position: absolute;
     z-index: 1000;
     height:160px;
     width: 250px;
    color: midnightblue;
    
     visibility: hidden;
     background-color: lavender;
     -moz-border-radius: 8px;
     border-radius: 8px;
     border-width: 3px;
     border-color:#444;
  }  
  #msg {
      z-index: 5000;
     width:160px;
     height: 150px;
      -moz-border-radius: 8px;
     border-radius: 8px;
     border-width: 3px;
     border-color:#444;
      position: absolute;
      left: 85%;
      top:3%;
      cursor: pointer;
     background-color: navajowhite;
      
  }
  </code></pre>
  <p>My problem is that the msg DIV is always visible on the screen whenever page loads or reloads. I want it to be visible only if it gets the response from my server . Is there any JQUERY or JAVASCRIPT or simple CSS method to do this?</p>