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

css visibility
jquery visibility: hidden show
jquery :visible
jquery show hide
jquery :visible property
jquery toggle visibility
jquery display:none
jquery not hidden

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

jsFiddle.

What is the equivalent of jQuery .hide() to set visibility: hidden , With no parameters, the .hide() method is the simplest way to hide an element: This is roughly equivalent to calling .css( "display", "none" ) , except that the The callback is not sent any arguments, but this is set to the DOM element being animated. Content Filter � Form � Hierarchy � jQuery Extensions � Visibility Filter. 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.

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.

.hide(), Elements with visibility: hidden or opacity: 0 are considered visible, since they still During animations that hide an element, the element is considered visible until Starting with this version, elements will be considered :visible if they have any performance boost provided by the native DOM querySelectorAll() method. Stack Overflow Public questions and answers; Teams Private questions and answers for your team; Enterprise Private self-hosted questions and answers for your enterprise; Jobs Programming and related technical career opportunities

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

:visible Selector, Elements with visibility: hidden or opacity: 0 are considered to be visible, since During animations that hide an element, the element is considered to be visible until the Starting with this version, elements will be considered :hidden if they don't performance boost provided by the native DOM querySelectorAll() method. According to JQuery documentation .show() "is roughly equivalent to calling .css('display', 'block'), except that the display property is restored to whatever it was initially." Set the style explicitly instead. You could use a CSS class .hidden{ visibility: hidden; } .shown{ visibility: visible; } and set is using

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.

:hidden Selector, Definition and Usage. The visibility property sets or returns whether an element should be visible. The visibility property allows the author to show or hide an� Show or Hide elements. jQuery provides 3 functions to show or hide elements. Show() function makes a hidden element visible. It works only if the element is already hidden. Hide() function hides a visible element but doesn’t remove it from the Document Object Model. Toggle() function will hide a visible element and show a hidden element. This

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;

HTML DOM Style visibility Property, Tip: Hidden elements take up space on the page. Use the display property to both hide and remove an element from the document layout! Default value: visible. Unless you need to have the element occupy page space though, use display: none; instead of visibility: hidden; in your CSS, then just do: $("#elem").show(); The .show() and .hide() functions deal with display instead of visibility, like most of the jQuery functions :)

CSS visibility property, Showing and hiding elements with vanilla JS is pretty straightforward. jQuery's show() , hide() , and toggle() methods use inline CSS to change the this approach is that you can easily set the default visibility of an element. This is roughly equivalent to calling .css( "display", "none" ), except that the value of the display property is saved in jQuery's data cache so that display can later be restored to its initial value. If an element has a display value of inline and is hidden then shown, it will once again be displayed inline.

How to show and hide elements with vanilla JavaScript, Set the visibility of elements with our visibility utilities. These utility Content will be hidden both visually and for assistive technology/screen reader users. The following snippets are not equivalent, what am I doing wrong? This one does not actually show the div $('#edit_div').css.visibility= 'visible'; whereas [SOLVED] Setting visibility - jQuery Forum

Visibility � Bootstrap, slideUp() , you'll have a display: none in the inline CSS to deal with. Careful you don't .hide() and then slideToggle(), that's not good enough! for college and the form had missing label s so she had no idea what to put in what fields. are the same height, you can just flip-flop which ones is visible by adjusting z- index . To toggle a div visibility in jQuery, use the toggle () method. It checks the div element for visibility i.e. the show () method if div is hidden. And hide () id the div element is visible. This eventually creates a toggle effect.

Comments
  • You can implement your own based on .toggle()
  • I'm also a fan of jQuery's toggleClass() method for this :) jqueryui.com/toggleClass Feel free to check out the example I shared in my answer below stackoverflow.com/a/14632687/1056713
  • @Tomas You'd have to shadow 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. :)
  • Could you post an example on how to support additional parameters of show (speed, easing, callback)?
  • It's superflous if you look at it that way, but there is a purpose. If this is concatenated to another script with a (function() { })() or similar, ASI won't kick in because it looks like a function invocation. Try this, then remove the !.
  • @NoBugs Automatic Semi-colon Insertion. I wrote a blog post about it here.
  • @VishalSakaria It's not really a well-defined term as far as I know, so it should be okay to use it here.
  • Good point, just a force of habit. Thanks. +1 to alex's answer!
  • Just curious, what's the point in wrapping these two functions in the (function($) {...}(jQuery)); wrapper? I've never defined my own functions in jQuery before, I have always just defined functions in straight JavaScript.
  • @VoidKing - It's just the "best practice" for jQuery plugins as per the docs. It allows you to use the $ identifier inside the function, even if it refers to something else in the parent scope.
  • jQuery actually has a built in toggleClass() method for this :) jqueryui.com/toggleClass Feel free to check out the example I shared in my answer below stackoverflow.com/a/14632687/1056713
  • I like this approach. It's less self-contained because it requires separate stylesheet, but it helps keep all style information in the stylesheets which is where it should belong. If you wanted to disable the visibility you could change a css tag in one place instead of changing all your js code.
  • For those using bootstrap, this class is called invisible.