The example of this article describes the method of implementing the closed layer with jquery. Share to everyone for your reference. The implementation methods are as follows:
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 ">
<title>jquery-built expansion/closing layer effect </title>
<script type= "Text/javascript" src= "/images/jquery.js" ></script>
<script type= "Text/javascript" >
$ (function ()
{
$ ("#mostrar"). Click (Function (event) {
Event.preventdefault ();
$ ("#caja"). Slidetoggle ();
});
$ ("#caja a"). Click (Function (event) {
Event.preventdefault ();
$ ("#caja"). Slideup ();
});
});
</script>
<style type= "Text/css"
Body {
font-family:verdana, Arial, Helvetica, Sans-serif;
font-size:11px;
color: #666666;
}
A{color: #993300; text-decoration:none;}
#caja {
width:70%
Display:none
padding:5px;
border:2px solid #FADDA9;
background-color:# FDF4E1;
}
#mostrar {
Display:block
width:70%;
padding:5px;
border:2px solid #D0E8F4;
Background-color: #ECF8FD;
}
</style>
<body>
<a href= "#" id= "Mostrar" > Click to expand Details ... (If the effect fails, please refresh this page, loaded into jquery after the normal!) ) </a>
<div id= "Caja" >
<a href= "#" class= "Close" >[x] off </a>
<p>lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolo Re magna aliquyam erat, sed diam voluptua. At Vero Eos et Accusam et justo duo Dolores et ea Rebum. Stet Clita KASD gubergren</p>
</div>
</body>
I hope this article will help you with your jquery programming.