show/hide div when input field is empty(jquery, javascript)

Question

I have a div with content, hide on default and I want to show it, when user input, in the input field which is #control.

<form>
<input name="control" value="" id="control" />
<div class="show_hide">
  //some content here........
</div>
</form>

1. Bind input event on the <input> 2. If entered any value in the textbox, show the <div> else hide it. — Tushar
– Tushar, Commented Mar 8, 2016 at 4:07

Tushar · Accepted Answer · 2016-03-08 04:59:29Z

9

// Bind keyup event on the input
$('#control').keyup(function() {
  
  // If value is not empty
  if ($(this).val().length == 0) {
    // Hide the element
    $('.show_hide').hide();
  } else {
    // Otherwise show it
    $('.show_hide').show();
  }
}).keyup(); // Trigger the keyup event, thus running the handler on page load

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form>
  <input name="control" id="control" />
  <div class="show_hide">
    //some content here........
  </div>
</form>

On keyup check the value of the input if length is 0 meaning empty hide the div otherwise show

edited Mar 8, 2016 at 4:59

Tushar

87.4k21 gold badges164 silver badges182 bronze badges

answered Mar 8, 2016 at 4:16

guradio

15.6k4 gold badges39 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

guradio Over a year ago

@Tushar added explanation. Im not good with english so i seldom explain i sometimes dont explain clear enough

Kartikeya Khosla · Accepted Answer · 2016-03-08 04:24:07Z

4

Attach input event with #control as shown :-

$('#control').on('input', function(){
   if($.trim(this.value) != "")
      $(this).next('div.show_hide').show();
   else
      $(this).next('div.show_hide').hide();
});

Shorter Versions :-

$('#control').on('input', function(){
    $(this).next('div.show_hide').toggle($.trim(this.value) != "");
});

OR

$('#control').on('input', function() {
  $(this).next('div.show_hide').toggle(this.value.length > 0);
});

OR(adding @Rayon answer in comment here)

$('#control').on('input', function(){
    $(this).next('div.show_hide').toggle(!this.value);
});

edited Mar 8, 2016 at 4:24

answered Mar 8, 2016 at 4:08

Kartikeya Khosla

18.9k8 gold badges46 silver badges70 bronze badges

3 Comments

Rayon Over a year ago

Will this hide the input if value is '' ?

Rayon Over a year ago

Or just $(this).next('div.show_hide').toggle(!this.value); Like this

Kartikeya Khosla Over a year ago

@RayonDabre... i don't think !this.value will return bool?

Collectives™ on Stack Overflow

show/hide div when input field is empty(jquery, javascript)

2 Answers 2

1 Comment

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related