In a div, I have <div id="test" style="visibility:hidden">, I used $('#test').show(), it does not show up my div. But if I use $('#test').css('visibility','visible'), the div will show up.
$('#test').hide() will also hide my div, $('#test').show() will show up the div, I am wondering why both can hide div, but cannot use crossly?
Visibility:hidden hides the targeted content, but it still keeps its place in the DOM : another element below it won't come at its place.
hide() also affects the DOM : the element's place is available for other content to be displayed at its place.
See this answer for example : https://stackoverflow.com/a/133064/4834168
jQuery hide is roughly equivalent to calling .css( "display", "none" ). show works accordingly.
Generally visibility:hidden hides it but leaves the space or Its Still there allocating the space but not showing up .
That's why
$('#test').show() is not working because show()works on elements hidden with jQuery methods and display:none in CSS. Not visibility:hidden And its working on $('#test').hide()
on the other hand
display:none means that the tag in question will not shown in the page at all but you can still reach/use it through the document object model/DOM). There will be no space allocated for it between the other tags.So Here You can Use $('#test').show(); as I mentioned you can interact with it
Finally In a nutshell :if you set display:none, it hides the entire element, while visibility:hidden means that the contents of the element will be invisible, but the element stays in its original position and size & still affects layout.
Hope It Helps.
