Equivalent of jQuery .hide() to set visibility: hidden Equivalent of jQuery .hide() to set visibility: hidden javascript javascript

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

jsFiddle.


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");    });});