<html xmlns="http:///1999/xhtml">
<head>
<title>The expansion/closing layer effect created by JQuery</title>
<script type="text/javascript" src="/images/"></script>
<script type="text/javascript">
$(function()
{
$("#mostrar").click(function(event) {
();
$("#caja").slideToggle();
});
$("#caja a").click(function(event) {
();
$("#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>
</head>
<body>
<a href="#" >Click to expand the details... (If the effect fails, please refresh this page. It will be normal after loading jquery!)</a>
<div >
<a href="#" class="close">[x]Close</a>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore 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>
</html>