[jQuery-CSS-HTML] Expandir Y Contraer

<script type="text/javascript" src="http://desencripmf.byethost22.com/contraer.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">

#caja {
width:60%;
display: none;
padding:5px;
border:2px solid #FADDA9;
background-color:#FDF4E1;
font-family:Verdana, Arial, Helvetica, sans-serif;text-align:center;color:#088A08;
}
#mostrar{
display:block;
width:60%;
padding:5px;
border:2px solid #D0E8F4;
background-color:#ECF8FD;
font-family:Verdana, Arial, Helvetica, sans-serif;text-align:center;color:#000;
}
</style>  <a href="#" id="mostrar">MOSTRAR</a>
<div id="caja"><a href="#" class="close"><font color="#ff0000">[x] Ocultar</font></a>
<p>Codigo Para Expandir y Contraer</p>
</div>