change visibility of label tag using jquery

Question

I have a label with hidden visibility on page load. How can i make it visible using jquery

<label for="error" style="margin:100px auto 60px auto;color:Red; line-height:40px;font-size:medium;visibility:hidden">error occured</label>

I am able to hide it.

  $('label[for="error"]').hide();

This doesn't work

 $('label[for="error"]').show();

Just guessing, but try display: none; instead of visibility: hidden; — Rake36, Jul 25 '13 at 17:19
That or it's possible it is showing but is hidden behind something else. — runspired, Jul 25 '13 at 17:20
changing visibility:hidden to display:none fixes your problem.....http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_hide_show — A.O., Jul 25 '13 at 17:21
If it is visibility:hidden, and you want to maintain position, set opacity to 0 — runspired, Jul 25 '13 at 17:21
hide() and show() change if you can see an element by adding display:none; and then removing display:none; don't use visibility to hide things........ — Rooster, Jul 25 '13 at 17:21
Thank you all. visibility: hidden was was my problem. display:none fixed my issue. — priya, Jul 25 '13 at 17:29

score 6 · Accepted Answer · edited Nov 16 '17 at 10:37

6

Change your code as follows:

<label for="error" style="margin:100px auto 60px auto;color:Red; line-height:40px;font-size:medium;display:none">error occured</label>

I've replaced your visibility:hidden with display:none.

You can then use the jQuery hide() and show() functions.

edited Nov 16 '17 at 10:37

Roshna Omer

answered Jul 25 '13 at 17:25

Charlie74

score 4 · Answer 2 · answered Jul 25 '13 at 17:21

4

Set the CSS property visibility to visible.

$('label[for="error"]').css('visibility', 'visible');

answered Jul 25 '13 at 17:21

vsr

score 0 · Answer 3 · edited Feb 18 '14 at 18:47

0

Visibility:hidden and display:none both are the different things:

You can check it's difference Play

You are hiding your element with

visibility:hidden

try display:none instead visibility: hidden

edited Feb 18 '14 at 18:47

animuson

answered Jul 25 '13 at 17:25

Dhaval Marthak

score 0 · Answer 4 · answered Jul 25 '13 at 17:25

0

Your css has "visibility:hidden", which is responsible for hiding the labels, not the jquery method. Use "display:none" instead

answered Jul 25 '13 at 17:25

twinlakes

score 0 · Answer 5 · answered Jul 25 '13 at 17:27

0

Try to use display:none instead of visibility:hidden I've made a jsFiddle for you.

label[for="error"]{
    margin:100px auto 60px auto;
    color:Red; 
    line-height:40px;
    font-size:medium;
    display:none;    
}

answered Jul 25 '13 at 17:27

TheAnchorsmith

5 Answers5