Question

I have two divs i want to be able to replace them when I click on links. Now I’m able to hide the signedin div when the page loads and when I click on the sign in link, signedin div can show up agian. However, my problem is that the normaldisplay div won’t go away. Both divs are displayed on my page now. How can I fix it? Thanks in advance.

Here is the html:

<div id="normaldisplay"><a href="#" id="signinlink">Sign In</a></div>

<div id="signedin">
    Username: <input type="text" name="username" size="10">
    Password: <input type="password" name="pwd" size="10">
    <a href="#" id="signinlink2">Sign Me In</a>     
</div>

Here is the Jquery

$(document).ready(function(){

 // Hide div 2 by default
 $('#signedin').hide();

  $('#signinlink').click(function(){ 
         $('normaldisplay').hide();
         $('#signedin').show();
  });

  $('signinlink2').click(function(){ 
         $('#signedin').hide();
         $('#normaldisplay').show();
  }); 
});

Answer 1

You seem to be missing a # (which happens to be the jQuery id selector operator) in your call to $('normaldisplay').hide(); . Try $('#normaldisplay').hide()