29

I have the following code:

$('#loading').css("visibility", "visible");

$('#loading').show();

For some reason unknown to me when I use the CSS it works!

But when I use .show();

It does not work. Please kindly help. I am a new to JQuery.

Thank you.

Edit:

<div class="footerOrder" id="loading" style="visibility:visible;">
      <img src="../utils/loadingExistenz.gif" width="32" height="32" border="0" />
</div>

Tried this:

<div class="footerOrder" id="loading" style="display:block;">

Then:

$('#loading').hide();

And still no go for some reason!

EDIT: Weird thing is it is working for all the other DIVs!!

0

6 Answers 6

39

jQuery's .show() and .hide() only operate on the CSS display property, not on the visibility property. I just checked the jQuery 1.7 source code and verified that is the case.

So, .css('display', 'none') would be matched with .show().

If you want to change the visibility, you would just change the css directly or make your own hideV() and showV() methods to do it for you:

jQuery.fn.showV = function() {
    this.css('visibility', 'visible');
}

jQuery.fn.hideV = function() {
    this.css('visibility', 'hidden');
}
1
  • 1
    Found this in the docs: Elements with **visibility: hidden** or opacity: 0 are considered to be visible, since they still consume space in the layout.
    – gdoron
    Mar 17, 2012 at 21:43
34

Use display:none; instead of visibility

This works fine for me

$(function(){   

    $("#aLink2").click(function(){
        $('#loading').show();
    });  

});​

Working sample : http://jsfiddle.net/HShHg/6/

5
  • I see your sample and it is working but I cannot get it to work in my page. Do you think having a Class at the same time as well as an ID could cause such behaviour?
    – iTEgg
    Mar 17, 2012 at 21:44
  • id's of elements should be unique. Check whether some other script error is there using firebug console tab
    – Shyju
    Mar 17, 2012 at 21:44
  • @i. No it can not! do you have visibility: hidden on the element? how did you hide it?
    – gdoron
    Mar 17, 2012 at 21:45
  • Great found the problem: window.document.getElementById("loading").style.visibility = "hidden"; somewhere in the code was blocking it!
    – iTEgg
    Mar 17, 2012 at 22:25
  • @iGuygar : Glad you figured it out.
    – Shyju
    Mar 17, 2012 at 22:26
5

According to the docs:

.show() This is roughly equivalent to calling .css('display', 'block')

so if you messed up with the visibility, it won't help you.

What you should do is, always hide with .css('display', 'none') or with .hide()


I've Just found this useful docs:

Elements with visibility: hidden or opacity: 0 are considered to be visible, since they still consume space in the layout.

3

jQuery .show() requires to have display:none css property

2

I would stick with putting visibility: hidden; on the element and then use .css("visibility", "visible"); to show it precisely because it still takes up space on the page.

That will avoid jittery pages while loading and the dreaded Flash of Unseen Content (FOUC).

0
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('div#sidebar-collapses').click(function(){
  if ( $("#title").is(":hidden") ) { 
    $("#title").show(); 
  } else if ( $("#title").is(":visible") ) { 
    $("#title").hide(); 
  }
})

});
</script>
</head>
<body>
<div class="sidebar-collapse" style="" id="sidebar-collapses">
     <a href="#" class="sidebar-collapse-icon with-animation">
         Test              
         <i class="menu"></i>
     </a>
 </div>
 <a href="mysite_url" id="title" style="display:none;"> <br> My Site Name </a>

</body>
</html>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.