How to hide a div with jQuery?

JavascriptJquery

Javascript Problem Overview


When I want to hide a HTML <div>, I use the following JavaScript code:

var div = document.getElementById('myDiv');
div.style.visibility = "hidden";
div.style.display = "none";

What is the equivalent of that code in jQuery?

Javascript Solutions


Solution 1 - Javascript

$('#myDiv').hide();

or

$('#myDiv').slideUp();

or

$('#myDiv').fadeOut();

Solution 2 - Javascript

$("#myDiv").hide();

will set the css display to none. if you need to set visibility to hidden as well, could do this via

$("#myDiv").css("visibility", "hidden");

or combine both in a chain

$("#myDiv").hide().css("visibility", "hidden");

or write everything with one css() function

$("#myDiv").css({
  display: "none",
  visibility: "hidden"
});

Solution 3 - Javascript

Easy:

$('#myDiv').hide();

http://api.jquery.com/hide/

Solution 4 - Javascript

If you want the element to keep its space then you need to use,

$('#myDiv').css('visibility','hidden')

If you dont want the element to retain its space, then you can use,

$('#myDiv').css('display','none')

or simply,

$('#myDiv').hide();

Solution 5 - Javascript

$("myDiv").hide(); and $("myDiv").show(); does not work in Internet Explorer that well.

The way I got around this was to get the html content of myDiv using .html().

I then wrote it to a newly created DIV. I then appended the DIV to the body and appended the content of the variable Content to the HiddenField then read that contents from the newly created div when I wanted to show the DIV.

After I used the .remove() method to get rid of the DIV that was temporarily holding my DIVs html.

var Content = $('myDiv').html(); 
        $('myDiv').empty();
        var hiddenField = $("<input type='hidden' id='myDiv2'>");
        $('body').append(hiddenField);
        HiddenField.val(Content);

and then when I wanted to SHOW the content again.

        var Content = $('myDiv');
        Content.html($('#myDiv2').val());
        $('#myDiv2').remove();

This was more reliable that the .hide() & .show() methods.

Solution 6 - Javascript

$('#myDiv').hide() will hide the div...

Solution 7 - Javascript

$('#myDiv').hide(); hide function is used to edit content and show function is used to show again.

For more please click on this link.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionkamaciView Question on Stackoverflow
Solution 1 - JavascriptSujit AgarwalView Answer on Stackoverflow
Solution 2 - Javascripthonk31View Answer on Stackoverflow
Solution 3 - JavascriptctcherryView Answer on Stackoverflow
Solution 4 - JavascriptspecialscopeView Answer on Stackoverflow
Solution 5 - JavascriptCecil TheodoreView Answer on Stackoverflow
Solution 6 - JavascriptsajoshiView Answer on Stackoverflow
Solution 7 - JavascriptNand Kishore AgarwalView Answer on Stackoverflow