Home > Developer > JavaScript
JQuery shows a summary of how to hide page elements. jquery hides page elements.
There are many ways to hide a div in jquery, such as simple functions such as show (), hide (), toggle (), and slideDown () you can also set the style attribute of the div in css. I will introduce it below.
Show () method
The hidden <p> element is displayed.
Copy codeThe Code is as follows:
$ (". Btn2"). click (function (){
$ ("P"). show ();
});
Toggle () method
The toggle () method switches the visible state of the element.
If the selected elements are visible, these elements are hidden. If the selected elements are hidden, these elements are displayed.
Copy codeThe Code is as follows:
<Html>
<Head>
<Script type = "text/javascript" src = "/jquery. js"> </script>
<Script type = "text/javascript">
$ (Document). ready (function (){
$ (". Btn1"). click (function (){
$ ("P"). toggle (1000 );
});
});
</Script>
</Head>
<Body>
<P> This is a paragraph. </p>
<Button class = "btn1"> Toggle </button>
</Body>
</Html>
SlideDown () method
Hide <p> elements in Sliding Mode:
Copy codeThe Code is as follows:
$ (". Btn2"). click (function (){
$ ("P"). slideDown ();
});
Hide () method
Hide visible <p> elements:
Copy codeThe Code is as follows:
$ (". Btn1"). click (function (){
$ ("P"). hide ();
});
This function is often used with show.
Css () method
The css () method sets or returns one or more style attributes of the selected element.
Return CSS attributes
To return the value of the specified CSS attribute, use the following syntax:
Copy codeThe Code is as follows:
Css ("propertyname ");
$ ("P" ).css ("display", "none ");
View an instance
Copy codeThe Code is as follows:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Script type = "text/javascript">
$ (Document). ready (function (){});
Function hiden (){
$ ("# DivObj "). hide (); // The hide () function to hide data. A time parameter (millisecond) can also be included in the brackets. For example, hide (2000) can be hidden at a speed of 2000 milliseconds, it can also contain slow and fast
}
Function slideToggle (){
$ ("# DivObj"). slideToggle (2000); // switch the curtain effect. Click it and open it. The parameter can be left blank. The parameter description is the same as above.
}
Function show (){
$ ("# DivObj"). show (); // display, the parameter description is the same as above
}
Function toggle (){
$ ("# DivObj"). toggle (2000); // display hidden switchover. The parameters can be left blank. The parameter description is the same as above.
}
Function slide (){
$ ("# DivObj"). slideDown (); // curtain effect Expansion
}
</Script>
</Head>
<Body>
<H3> display and hide effects of div content <Input type = "button" value = "hide" onclick = "hiden ()"/>
<Input type = "button" value = "display" onclick = "show ()"/>
<Input type = "button" value = "Curtain effect display 2" onclick = "slide ()"/>
<Input type = "button" value = "Curtain effect switching" onclick = "slideToggle ()"/>
<Input type = "button" value = "Hide display effect switch" onclick = "toggle ()"/>
<Div id = "divObj" style = "display: none">
1. test example <br/>
2. test example <br/>
3. test example <br/>
4. test example <br/>
5. test example <br/>
6. test example <br/>
7. test example <br/>
8. test example <br/>
9. test example <br/>
0. test example <br/>
</Div>
</Body>
</Html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
