Paul On Technology

Exploring technology

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.

 

Comments

Kyle Dodge said:

Just what i was looking for, thanks!

# March 16, 2010 4:53 PM

NHOQUE said:

The function could be named ase toggleDisplay instead of toggle.

# July 12, 2010 8:45 PM

James said:

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

# November 4, 2010 1:27 PM

Steve said:

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.

# December 9, 2010 11:14 AM

narayan said:

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

# October 6, 2011 9:44 AM

jim said:

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

# October 7, 2011 11:34 AM

Jerry said:

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

# February 11, 2012 10:34 PM

pat said:

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 ?

# April 7, 2012 12:13 AM

Jon said:

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

# May 29, 2012 11:45 AM

Paul said:

Works perfectly.  Thanks Paul for posting this :)

# August 14, 2012 8:59 PM