title: The refreshed AJAX content hidden due to a CSS property
body: <p>I have an image. On clicking that image I get a pop-up. The contents inside the pop-up are generated by AJAX. I am using handlebars for templating. Since the pop-up should be hidden initially, I have set it's property to <code>display:none</code> and I am using toggle to show it on clicking the image. Now, coming to the problem, When I request another JSON using AJAX, I am using ,  </p>
  
  <pre><code>//get the HTML template from script tag
  var theTemplateScript = $("#dynamicData").html();
  //compile the template
  var theTemplate = Handlebars.compile(theTemplateScript);
  $("#sg-hb-employee").html(theTemplate(myData[0]));
  </code></pre>
  
  <p>the above code to get the content. I am replacing the html. Since the HTML is added again, the default <code>display: none</code> property is getting applied and I can see the new content only on clicking the image, whereas I was it just to be shown there itself without that <code>display:none</code> property being applied.</p>