Difference Between Jquery .Hide() and .Css("Display", "None")

Difference between jQuery .hide() and .css(display, none)

jQuery('#id').css("display","block")

The display property can have many possible values, among which are block, inline, inline-block, and many more.

The .show() method doesn't set it necessarily to block, but rather resets it to what you defined it (if at all).

In the jQuery source code, you can see how they're setting the display property to "" (an empty string) to check what it was before any jQuery manipulation: little link.

On the other hand, hiding is done via display: none;, so you can consider .hide() and .css("display", "none") equivalent to some point.

It's recommended to use .show() and .hide() anyway to avoid any gotcha's (plus, they're shorter).

Difference between jQuery’s .hide() and setting CSS to display: none

From the jQuery page about .hide():

"The matched elements will be hidden immediately, with no animation. 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, then is hidden and shown, it will once again be displayed inline."

So if it's important that you're able to revert to the previous value of display, you'd better use hide() because that way the previous state is remembered. Apart from that there's no difference.

$(function() {    $('.hide').click(function(){        $('.toggle').hide();        setDisplayValue();    });    $('.show').click(function(){        $('.toggle').show();        setDisplayValue();    });});
function setDisplayValue() {    var display = $('.toggle')[0].style.display;    $('.displayvalue').text(display);}

div {    display: table-cell;    border: 1px solid;    padding: 5px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><p>    <button class="hide">Hide</button>    <button class="show">Show</button></p>
<div class="toggle">Lorem Ipsum</div>
<p>    The display value of the div is:    <span class="displayvalue"></span></p>

jQuery ,Css display none - block vs. hide- show

Consider the following example.

$(function() {  $('#showMyList, #showMyAcc').hide();  $("#myList").click(function() {    $("#showMyAcc").hide();    $("#showMyList").show();  });  $("#myAcc").click(function() {    $("#showMyList").hide();    $("#showMyAcc").show();  });});

#showMyList,#showMyAcc {  height: 100px;  width: 500px;  text-align: center;  border: 1px solid gray;  background-color: antiquewhite;  position: absolute;  top: 200px;  left: 200px;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><button id="myList">Show List</button><button id="myAcc">Show Name</button><div id="showMyList">List</div><div id="showMyAcc">Name</div>

What is the difference between visibility:hidden and display:none?

display:none means that the tag in question will not appear on the page at all (although you can still interact with it through the dom). There will be no space allocated for it between the other tags.

visibility:hidden means that unlike display:none, the tag is not visible, but space is allocated for it on the page. The tag is rendered, it just isn't seen on the page.

For example:

test | <span style="[style-tag-value]">Appropriate style in this tag</span> | test

Replacing [style-tag-value] with display:none results in:

test |   | test

Replacing [style-tag-value] with visibility:hidden results in:

test |                        | test

How can I change CSS display none or block property using jQuery?

The correct way to do this is to use show and hide:

$('#id').hide();
$('#id').show();

An alternate way is to use the jQuery css method:

$("#id").css("display", "none");
$("#id").css("display", "block");

Differences between jQuery's hide() and .css('display', 'none')?

jQuery's hide method performs

        for ( i = 0; i < j; i++ ) {
            this[i].style.display = "none";
        }

You have some other problem.

The full method is

hide: function( speed, easing, callback ) {
    if ( speed || speed === 0 ) {
        return this.animate( genFx("hide", 3), speed, easing, callback);

    } else {
        for ( var i = 0, j = this.length; i < j; i++ ) {
            var display = jQuery.css( this[i], "display" );

            if ( display !== "none" ) {
                jQuery.data( this[i], "olddisplay", display );
            }
        }

        // Set the display of the elements in a second loop
        // to avoid the constant reflow
        for ( i = 0; i < j; i++ ) {
            this[i].style.display = "none";
        }

        return this;
    }
},

JavaScript style.display=none or jQuery .hide() is more efficient?

Talking about efficiency:

document.getElementById( 'elemtId' ).style.display = 'none';

---

What jQuery does with its .show() and .hide() methods is, that it remembers the last state of an element. That can come in handy sometimes, but since you asked about efficiency that doesn't matter here.

Difference between JQuery .show/.hide and CSS visibility:hidden

a. If you don't want to see the flashing effect, don't use the .hide('fast').

But for your case, you could just do $("#Progress").hide();

On a side note, try .hide('slow') to see a slower hide.

b. .show("fast") has no effect because you have style="visibility:hidden" [which hides but takes up space on your page] on your progress div.

Remove that & replace with style="display:none" [hides & doesn't take up space on your page]

Check, using jQuery, if an element is 'display:none' or block on click

You can use :visible for visible elements and :hidden to find out hidden elements. This hidden elements have display attribute set to none.

hiddenElements = $(':hidden');
visibleElements = $(':visible');

To check particular element.

if($('#yourID:visible').length == 0)
{

}

Elements are considered visible if they consume space in the document.
Visible elements have a width or height that is greater than zero,
Reference

You can also use is() with :visible

if(!$('#yourID').is(':visible'))
{

}

If you want to check value of display then you can use css()

if($('#yourID').css('display') == 'none')
{

}

If you are using display the following values display can have.

display: none

display: inline

display: block

display: list-item

display: inline-block

Check complete list of possible display values here.

To check the display property with JavaScript

var isVisible = document.getElementById("yourID").style.display == "block";
var isHidden = document.getElementById("yourID").style.display == "none"; 

---

Related Topics