Visibility property change

Question

I have a div that has the class name myClass and id myId. The div has the following style.

.myClass { height: 74%; margin-top: -1px; position: relative; overflow-y: auto; width: 100%; overflow-x: hidden; visibility: hidden; } 

When I try to change the visibility from hidden to visible by doing this

 $('#myId').css({ 'visibility': 'visible' }); 

I use id in jQuery instead of a class, because the same class applies to other elements. My div is still not visible. What am I doing wrong?

Answer 1

Why don't you try:

 $('#myId').css('display', 'block'); 

or Try:

 <style> .visible { display:block !important;} </style> $('#myId').addClass('visible'); 

Answer 2

Replace visibility: hidden; on display: none;

then update jQuery

 $('#myId').css('display','block'); 

Answer 3

Yes, you can do this in the following ways.

 $('#myId').css('display','block'); $('#myId').css('display','inline'); $('#myId').show(); 

Answer 4

in css, the visibility property affects the content inside the tag when displaying the properties of effects on a common tag, this means that if you apply display:none; , it will remove the entire tag, but visibility:hidden hides the contents inside this tag.

Since: visible is a jQuery selector, you can use opacity instead of visibility to hide the content inside the tag.

 $('#myId').css('opacity','1'); $('#myId').css('opacity','0'); 

if you need to hide the whole tag, it is better to go with the display none

Answer 5

just goes easy, there is an api available in jquery to hide and show DOM elements. Try the following.

  $('#myId').hide(); // for hiding the element $('#myId').show(); // to show up the element