How .show() and .hide() work in jquery

Question

I am currently wokring on a sign up where I hide and show different inputs depending on where they are in the sign up process. At the moment, I have 4 inputs and I want to start off by hiding two of them. I know in jquery you can do this with .hide(). However, when I load the page, the two inputs appear and then disappear. What does .show() and .hide() do to the element? Does it change the display? How can I make it so that when the page loads the elements start off hidden and then I can call .show() when I need them?

The code I have now is below. What I want is for me to not have to call.hide() in the ready function and for the elements to start off hidden.

$(document).ready(function ()
{
//loads elements then hides them
  $("#input3").hide();
  $("#input4").hide();

//some time later when triggers are set and I want to show the inputs
  $("#input3").show();
  $("#input4").show();
}

What I want:

$(document).ready(function ()
{
//inputs 3 and 4 are already hidden

//some time later when triggers are set and I want to show the inputs
  $("#input3").show();
  $("#input4").show();
}

Andy · Accepted Answer · 2015-12-05T12:41:38.333

4

Add display none to your html element

<input type="text" id="input1" style="display: none" />

or with css

#input1, #input2 {
  display: none;
}

edited Dec 05 '15 at 12:41

answered Dec 05 '15 at 12:37

Andy

397
2
8

nailed it, does .show and .hide just change the display? – user2455869 Dec 05 '15 at 12:39
Yes it is correct! See [link](http://api.jquery.com/hide/) for more information – Andy Dec 05 '15 at 12:43

score 0 · Answer 2 · answered Dec 05 '15 at 12:39

You can set their initial style display to none. It is better to avoid inline styles.

CSS

#input3, #input4 {
  display: none;
}

In your case, your jQuery is handling this. Before it gets executed, your HTML gets parsed & hence you are able to see the inputs until your JavaScript gets executed.

Hope it helps!

score 0 · Answer 3 · answered Dec 05 '15 at 12:42

0

create a css like this.

.hide
{
display : none
}

and use the hide class for the div you want to hide initially.

answered Dec 05 '15 at 12:42

Priya Rajaram

340
2
14

score 0 · Answer 4 · answered Dec 05 '15 at 12:49

0

You needs to hide input fields using css.

<input type="text" name="input_name" id="input_id" />
#input_id{
display:none;
}

When you needs to show this input field,just call a js function like

$('#input_id').show()

answered Dec 05 '15 at 12:49

sumon cse-sust

434
4
8

How .show() and .hide() work in jquery

4 Answers4