Toggling visibility with JQuery

There is a subtle issue with the JQuery toggle method. I had a page that had a div set up similar to this

 

<div id="divGoodbye" style="border: 1px solid green; visibility: hidden; float: right;">Goodbye</div>

I was trying to toggle it from not visible to visible by doing this

 

function toggleGoodbye() {

$("#divGoodbye").toggle();

}

It didn’t work; however, if the div was initially styled with visibility:visible it worked perfectly. So I logged a bug report and the JQuery team got back to me with this

In jQuery, visibility is defined as taking up no space in the document.
Most commonly that would be via {{{display:none}}} or {{{width:0}}}. There
are other ways that an element might not be visible in the browser's
viewport, including {{{visibility:hidden}}}, {{{opacity:0}}}, {{{margin-
left:-10000px}}}, or being completely obscured by other elements higher in
the {{{z-index}}} order. Those do not count as hidden as far as jQuery is
concerned.

If you need to use the {{{visibility}}} (or {{{opacity}}}) attribute as
your method of making an element invisible, just track and toggle it
yourself.In jQuery, visibility is defined as taking up no space in the document.
Most commonly that would be via {{{display:none}}} or {{{width:0}}}. There
are other ways that an element might not be visible in the browser's
viewport, including {{{visibility:hidden}}}, {{{opacity:0}}}, {{{margin-
left:-10000px}}}, or being completely obscured by other elements higher in
the {{{z-index}}} order. Those do not count as hidden as far as jQuery is
concerned.

If you need to use the {{{visibility}}} (or {{{opacity}}}) attribute as
your method of making an element invisible, just track and toggle it
yourself.

So I changed the style to this

 

<div id="divHello" style="border: 1px solid red; display:none; float:left;">

Hello

 

</div>

This works every time as expected. Hopefully this will save someone a bit of frustration. All scenarios worked in IE7, Firefox and Safari.

 

10 Comments

  • Just what i was looking for, thanks!

  • The function could be named ase toggleDisplay instead of toggle.

  • Thanks Paul. This post just saved me a TON of time and frustration :)

  • Actually, the title of this post is misleading to most people. Please update your post with this new information:

    Display and visibility are two different CSS properties with completely different behavior.

    Display removes the element completely from the flow of the layout, whereas visibility keeps the element in the flow of the layout, but simply makes it invisible.

    There are definitive times for using one property over the other.

    To set visibility with jQuery, you must manually set it with the css() method:

    $('#element').css('visibility', 'hidden');

    or

    $('#element').css('visibility', 'visible');

    $('#element').show() and $('#element').hide() only deal with the 'display' css property.

  • hey i am new in asp.net i used jquery toogle in simple html its work fine but i used in asp.net it not work well....
    so can u give be step by step procedure to add jquery in asp.net ..
    thnks in advance

  • Paul, I greatly appreciate this article. It saved me quite a bit of time!

  • Perfect.. exactly the issue I was trying to solve. Thanks!

  • this does not work. if a div is set to display:none; you don't see it. period.

    what is there to toggle ?

    all this great tip stuff. did anyone actually try it ?

  • Thanks that was so useful I had a hidden / visibility issue that has been driving me wild.

  • Works perfectly. Thanks Paul for posting this :)

Comments have been disabled for this content.