Question

I’ve changed a few pages from using generic JavaScript that sets a CSS style property

element.style.display = "none";

to jQuery’s method

element.hide();

When the back button is used to return to my page, elements that were hidden using jQuery are no longer hidden. When I use raw JavaScript to set the display, the hidden elements stay hidden when I return to the page.

Is there a workaround to allow jQuery’s hide() function to work the same way?

Answer 1

jQuery’s hide method performs

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

You have some other problem.

The full method is

hide: function( speed, easing, callback ) {
    if ( speed || speed === 0 ) {
        return this.animate( genFx("hide", 3), speed, easing, callback);

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

            if ( display !== "none" ) {
                jQuery.data( this[i], "olddisplay", display );
            }
        }

        // Set the display of the elements in a second loop
        // to avoid the constant reflow
        for ( i = 0; i < j; i++ ) {
            this[i].style.display = "none";
        }

        return this;
    }
},