I have a bit of an issue with a toggle visibility function which operates on the hidden attribute of an element. Trouble is, this lacks browser patibility..

function hide(e) {$(e).hidden=true;}    
function show(e) {$(e).hidden=false;}

Googling this issue I came across the method of toggling the style.display property, like so..

function toggle(e) {
document.getElementById(e).style.display = (document.getElementById(e).style.display == "none") ? "block" : "none";
}

..but this seems sub-optimal, because you can't have a generic show/hide function that sets the display property to block. What if the element in question sometimes is supposed to have a inline or something?

How does for example jQuery solve this issue?

I have a bit of an issue with a toggle visibility function which operates on the hidden attribute of an element. Trouble is, this lacks browser patibility..

function hide(e) {$(e).hidden=true;}    
function show(e) {$(e).hidden=false;}

Googling this issue I came across the method of toggling the style.display property, like so..

function toggle(e) {
document.getElementById(e).style.display = (document.getElementById(e).style.display == "none") ? "block" : "none";
}

..but this seems sub-optimal, because you can't have a generic show/hide function that sets the display property to block. What if the element in question sometimes is supposed to have a inline or something?

How does for example jQuery solve this issue?

• javascript
• jquery
• show-hide

• 3 Go read the source to find out ;-) – Didier Ghys Commented Jan 23, 2012 at 10:30
• 2 @Didier Ghys, I did, I was just hoping someone would explain it to me :-) – jenswirf Commented Jan 23, 2012 at 10:38

1 Answer 1

It stores the old display value in a data attribute called olddisplay and then uses the value of that to restore it when showing the element again. See the implementation here. You can check the implementation of any jQuery method on that site.

In the following code snippets I've annotated the important line with a //LOOK HERE ment.

The important part of the show method:

for (i = 0; i < j; i++) {
    elem = this[i];

    if (elem.style) {
        display = elem.style.display;

        if (display === "" || display === "none") {
            elem.style.display = jQuery._data(elem, "olddisplay") || ""; //LOOK HERE
        }
    }
}

When hiding an element it firstly stores the current display value in a data attribute:

for (var i = 0, j = this.length; i < j; i++) {
    if (this[i].style) {
        var display = jQuery.css(this[i], "display");

        if (display !== "none" && !jQuery._data(this[i], "olddisplay")) {
            jQuery._data(this[i], "olddisplay", display); //LOOK HERE
        }
    }
}

And then simply sets the display property to none. The important part:

for (i = 0; i < j; i++) {
    if (this[i].style) {
        this[i].style.display = "none"; //LOOK HERE
    }
}

Note

The above code is taken from jQuery version 1.6.2 and is obviously subject to change in later versions.