Jquery toggle focus/blur

Question

trying to toggle between focus and blur on a text box, so that when I focus on it a message pops up, and when I blur it gets removed and the blur message comes out. Done some research but I'm scratching my head, any help is appreciated. The JS :

    $(function() {
       $("#name").focus(function() {
          $("#msg").html("<i>Ah, I see you like clicking 
    boxes...</i>");
    });

     $("#name").blur(function(){
       $("#blur-msg").html("<b>WHERE DO YOU THINK 
    YOU'RE GOING?!</b>");
   });

});

Answer 1

I got it working like this. Make sure your ids are correctly placed in your HTML.

<div >
  <input id="name" type="text"/>
  <div id="msg">
    <i>Ah, I see you like clicking boxes...</i>
  </div>
  <div id="blur-msg">
    <b>WHERE DO YOU THINK YOU'RE GOING?!</b>
  </div>
</div>




$("#msg").hide();
$("#blur-msg").hide();

$("#name").focus(function() {
  $("#msg").show();
  $("#blur-msg").hide();
});

$("#name").blur(function(){
  $("#msg").hide();
  $("#blur-msg").show();
});