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() or so. Thanks.

Answer 1

You could make your own plugins.

jQuery.fn.visible = function() {     return this.css('visibility', 'visible'); };  jQuery.fn.invisible = function() {     return this.css('visibility', 'hidden'); };  jQuery.fn.visibilityToggle = function() {     return this.css('visibility', function(i, visibility) {         return (visibility == 'visible') ? 'hidden' : 'visible';     }); }; 

If you want to overload the original jQuery toggle(), which I don't recommend...

!(function($) {     var toggle = $.fn.toggle;     $.fn.toggle = function() {         var args = $.makeArray(arguments),             lastArg = args.pop();          if (lastArg == 'visibility') {             return this.visibilityToggle();         }          return toggle.apply(this, arguments);     }; })(jQuery); 

jsFiddle.

Answer 2

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(); 

Here's a working example.