Collapse
html code:
<!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" xml:lang="en" lang="en">
<head>
<title>JQuery Collapse</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="Common.js"></script>
<link type="text/css" rel="stylesheet" href="styleCss.css"></link>
</head>
<body>
<a href="#" id="mostrar">MOSTRAR</a>
<div id="caja">
<p>Lorem ipsum dolor sit amet,...</p>
</div>
</body>
</html>
CSS code:
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;
}
jQuery code:
$(document).ready(function() {
$(function(){
$("#mostrar").click(function(event) {
event.preventDefault();
$("#caja").slideToggle();
});
$("#caja a").click(function(event) {
event.preventDefault();
$("#caja").slideUp();
});
}
);
});
