A brief summary of several ways JQuery shows and hides div

< div id="demo" > AAA < /div >

JS can hide and display div in two ways:

Option 1: free up page space after hiding

By setting the display property, div can be hidden to free up occupied page space.

[

style="display: none;"
demo document. getElementById (" "). style. display = "none"; / / hide
demo document. getElementById (" "). style. display = ""; / / show

]

Method 2: hide and still occupy the page space, show blank

[

div's visibility can control the display and hiding of div, but the hidden page shows white space.
style="visibility: none;"
demo document. getElementById (" "). style. visibility = "hidden"; / / hide
demo document. getElementById (" "). style. visibility = "visible"; / / show

]

Note:

Using the second method is more humane, however, hiding with div.style.display ="none" will cause things inside div to go to sleep and events inside will not respond.

jQuery hide and display div way

1 , $("#demo").attr("style","display:none;");// hidden div
   $("#demo").attr("style","display:block;");// According to div
2 , $("#demo").css("display","none");// hidden div
   $("#demo").css("display","block");// According to div
3 , $("#demo").hide();// hidden div
   $("#demo").show();// According to div
4 , $("#demo").toggle(// Dynamic display and hide 
     function () { 
       $(this).attr("style","display:none;");// hidden div
     },
     function () {  
       $(this).attr("style","display:block;");// According to div
     }
   );
    <div id="demo"></div>

Note:

[

$(" # demo "). show display () said: block,
$(" # demo "). hide display () said: none;

]

In 1 and 2, display:none can be replaced by visibility:hidden, display:block can be replaced by visibility:visible. The difference between the two is that the former takes up no space when hidden, while the latter takes up space when hidden

Here is the site with a few examples to add to it

[

$(" # top_notice "). css (" display ", "block"); // method 1
/ / $(" # top_notice ".) attr (" style ", "display: block;" ); // the second method
/ / $(" # top_notice ".) show (); // the third method

]

1. Change the element to class to hide div, provided that the class style defines the hidden attribute

$("#sendPhoneNum").attr("class", "n_input3");  

1.2 set the style attribute to the element

$("#top_notice").attr("style", "display:block;");  

2. Through jquery's css method, set div to hide

$("#sendPhoneNum").css("display", "none");  

3. Set div to hide through show() and hide() of jquery

$("#textDiv").show();// According to div  

$("#imgDiv").hide();// hidden div  

div is often used in programming to show and hide. The following methods are summarized:

<div id='demo'> The sample </div>

1 , $("#demo").attr("style","display:none;");// hidden div

   $("#demo").attr("style","display:block;");// According to div

2 , $("#demo").css("display","none");// hidden div

   $("#demo").css("display","block");// According to div

3 , $("#demo").hide();// hidden div

   $("#demo").show();// According to div

4 , $("#demo").toggle(

       function () {

            $(this).attr("style","display:none;");// hidden div

       },

       function () {

            $(this).attr("style","display:block;");// According to div

       }

   );

For your reference only!