CODEWITHSUNDEEP
javascriptjquery
user1551482
user1551482

Reputation: 529

using jquery i want the a div to hide when the input is empty?

For example say i have a text box and a hidden div called suggestions

$("#suggestinput").on({
  keyup: function(){
    $("#suggestions").addClass("active");
  },
  blur: function () {
    $("#suggestions").removeClass('active');
  }
 //another event to know if input is empty while on focus, then removeClass('active');
});

The first event is when the user types in the input show suggestion, the second one is blur, so when the user unfocuses on the input the suggestions el will hide, i want a third event to check while on focus if the input is empty remove active class.

Working example is here thanks: http://jsfiddle.net/HSBWt/

Upvotes: 1

Views: 552

Answers (1)

Zoltan Toth
Zoltan Toth

Reputation: 47667

Try this - http://jsfiddle.net/HSBWt/1/

$("#suggestinput").on({
  keydown: function(){
    $("#suggestions").addClass("active");
  },
  blur: function () {
    $("#suggestions").removeClass('active');
  },
  keyup: function () {
      if ( $(this).val() == "" ) {
        $("#suggestions").removeClass('active');
      }
  }
});

Upvotes: 3

Related Questions