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.
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); 
toggle() which could break other scripts. If you wanted, you could add an extra argument to toggle() to specify whether visibility or display should be toggled. I'd just use the custom one in my last example, however. :)
show (speed, easing, callback)?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.
(function($) {...}(jQuery)); wrapper? I've never defined my own functions in jQuery before, I have always just defined functions in straight JavaScript.$ identifier inside the function, even if it refers to something else in the parent scope.
An even simpler way to do this is to use jQuery's toggleClass() method
CSS
.newClass{visibility: hidden} HTML
<a href="#" class=trigger>Trigger Element </a> <div class="hidden_element">Some Content</div> JS
$(document).ready(function(){ $(".trigger").click(function(){ $(".hidden_element").toggleClass("newClass"); }); }); 
If you only need the standard functionality of hide only with visibility:hidden to keep the current layout you can use the callback function of hide to alter the css in the tag. Hide docs in jquery
An example :
$('#subs_selection_box').fadeOut('slow', function() { $(this).css({"visibility":"hidden"}); $(this).css({"display":"block"}); }); This will use the normal cool animation to hide the div, but after the animation finish you set the visibility to hidden and display to block.
An example : http://jsfiddle.net/bTkKG/1/
I know you didnt want the $("#aa").css() solution, but you did not specify if it was because using only the css() method you lose the animation.
Here's one implementation, what works like $.prop(name[,value]) or $.attr(name[,value]) function. If b variable is filled, visibility is set according to that, and this is returned (allowing to continue with other properties), otherwise it returns visibility value.
jQuery.fn.visible = function (b) { if(b === undefined) return this.css('visibility')=="visible"; else { this.css('visibility', b? 'visible' : 'hidden'); return this; } } Example:
$("#result").visible(true).on('click',someFunction); if($("#result").visible()) do_something; Pure JS equivalent for jQuery hide()/show() :
function hide(el) { el.style.visibility = 'hidden'; return el; } function show(el) { el.style.visibility = 'visible'; return el; } hide(document.querySelector(".test")); // hide($('.test')[0]) // usage with jQuery We use return el due to satisfy fluent interface "desing pattern".
Here is working example.
Below I also provide HIGHLY unrecommended alternative, which is however probably more "close to question" answer:
HTMLElement.prototype.hide = function() { this.style.visibility = 'hidden'; return this; } HTMLElement.prototype.show = function() { this.style.visibility = 'visible'; return this; } document.querySelector(".test1").hide(); // $('.test1')[0].hide(); // usage with jQuery of course this not implement jQuery 'each' (given in @JamesAllardice answer) because we use pure js here.
Working example is here.
.toggle()