What is the equivalent of jQuery hide to set visibility hidden

Question

In jQuery, there are .hide() and .show() methods which sets the CSS display: none setting.

Is there an equivalent function which would set the visibility: hidden setting?

I know I can use .css() but I prefer some function like .hide().

Answer 1

Hello Kartik,

There isn't one built in but you could write your own quite easily:

(function($) {
    $.fn.invisible = function() {
        return this.each(function() {
            $(this).css("visibility", "hidden");
        });
    };
    $.fn.visible = function() {
        return this.each(function() {
            $(this).css("visibility", "visible");
        });
    };
}(jQuery));

You can then call this like so:

$("#someElem").invisible();
$("#someOther").visible();

Thank You!!