Equivalent of Jquery .Hide() to Set Visibility: Hidden

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.

What is the JavaScript equivalent of jQuery's hide() and show()?

this is simple

document.getElementById('myElement').style.display = 'block'; // show
document.getElementById('myElement').style.display = 'none'; // hide

add a onSelect="selectOptionsupdated(this) in your select

then

function selectOptionsupdated(select){
//do your stuff here  
}

Javascript equivalent of jQuery's .hide()

In the first paragraph of the documentation:

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.

Also, even if it wasn't documented, it could be confirmed by looking at the source code for show()/hide().

hidden and visibility corresponded to show() or css(visibility,visible)?

Generally visibility:hidden hides it but leaves the space or Its Still there allocating the space but not showing up .

That's why

$('#test').show() is not working because show()works on elements hidden with jQuery methods and display:none in CSS. Not visibility:hidden And its working on $('#test').hide()

on the other hand

display:none means that the tag in question will not shown in the page at all but you can still reach/use it through the document object model/DOM). There will be no space allocated for it between the other tags.So Here You can Use $('#test').show(); as I mentioned you can interact with it

Finally In a nutshell :if you set display:none, it hides the entire element, while visibility:hidden means that the contents of the element will be invisible, but the element stays in its original position and size & still affects layout.

Hope It Helps.

how can I set visible back to true in jquery

Using ASP.NET's visible="false" property will set the visibility attribute where as I think when you call show() in jQuery it modifies the display attribute of the CSS style.

So doing the latter won't rectify the former.

You need to do this:

$("#test1").attr("visibility", "visible");

How to change visibility of a div css to visible with jQuery

firstly you have not closed your if statement and navigationButtonTop is a class not a id try this.

if (that.get("pageCounter") >= 1) {
     $(".navigationButtonTop").css("visibility", "visible");
}

as the OP has edited his question the new answer would be:

$(function() {
  $(".navigationButtonTop").css("visibility", "visible");
});

Jquery .show() not revealing a div with visibility of hidden

If you have hidden it with visibility:hidden then you can show it with jQuery by

$(".Deposit").css('visibility', 'visible');

And in the fiddle you are missing jQuery. Here is a demo: http://jsfiddle.net/9Z6nt/20/

Jquery hover show and hide visibility issue

Try this:-

http://jsfiddle.net/DhQjk/

css

.hidden { visibility:hidden; }

Html

Add hidden class to your dynamic content initially.

 <div class="carousel-col-copy hover-hide hidden">

JS

Use .toggle() on hover.

$(".tint").hover(function(){
        $('.hover-hide').toggleClass('hidden');
});

Ref .toggle()

How .show() and .hide() work in jquery

Add display none to your html element

<input type="text" id="input1" style="display: none" />

or with css

#input1, #input2 {
  display: none;
}

---

Related Topics