Equivalent of jQuery .hide() to set visibility: hidden
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);
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.
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"); });});