There are a number of ways to show hidden div methods in jquery, such as the simpler function shows (), Hide (), toggle (), Slidedown (), and then the CSS Settings div's Style property can be manipulated, I'll introduce.
Show () method
Shows the hidden <p> elements.
Copy Code code as follows:
$ (". Btn2"). Click (function () {
$ ("P"). Show ();
});
Toggle () method
The toggle () method Toggles the visible state of the element.
If the selected element is visible, the elements are hidden, and those elements are displayed if the selected element is hidden.
Copy Code code as follows:
<script type= "Text/javascript" src= "/jquery/jquery.js" ></script>
<script type= "Text/javascript" >
$ (document). Ready (function () {
$ (". Btn1"). Click (function () {
$ ("P"). Toggle (1000);
});
});
</script>
<body>
<p>this is a paragraph.</p>
<button class= "BTN1" >Toggle</button>
</body>
Slidedown () method
To display hidden <p> elements in a sliding way:
Copy Code code as follows:
$ (". Btn2"). Click (function () {
$ ("P"). Slidedown ();
});
Hide () method
Hide the visible <p> elements:
Copy Code code 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 properties of the selected element.
Back to CSS Properties
To return the value of the specified CSS property, use the following syntax:
Copy Code code as follows:
CSS ("PropertyName");
$ ("P"). CSS ("display", "none");
Look at an example
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<script type= "Text/javascript" >
$ (document). Ready (function () {});
function Hiden () {
$ ("#divObj"). Hide (),//hide () function, hidden, with a time parameter (ms) in parentheses (milliseconds) such as Hide (2000) is hidden at 2000 milliseconds, and can take slow,fast
}
function Slidetoggle () {
$ ("#divObj"). Slidetoggle (2000);//curtain effect of the switch, point to collect, click Open, Parameters can not, parameter description ditto
}
Function Show () {
$ ("#divObj"). Show ()//display, parameter description ditto
}
function Toggle () {
$ ("#divObj"). Toggle (2000);//Show hidden switch, parameters can be no, parameter description ditto
}
function Slide () {
$ ("#divObj"). Slidedown ()//curtain effect unfold
}
</script>
<body>
<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 switch" onclick= "Slidetoggle ()"/>
<input type= "button" value= "Hide display effect Toggle" 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>
