Hola, eso se hace muy facil con jQuery, aqui te dejo dos ejemplos:
Usa un botón:
HTML:
<html>
<head>
<!--- INCLUIMOS JQUERY -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<!-- DEFINIMOS LA FUNCION QUE EJECUTARA EL BOTON -->
<script type="text/javascript">
function showHide(){
$('#text').slideToggle();
}
</script>
</head>
<body>
<!-- EL DIV QUE SE MOSTRARA -->
<div id="text">
<p>Test</p>
</div>
<!-- BOTON QUE USANDO ONLCIK MOSTRARA Y OCULTARA EL DIV -->
<input type="button" onClick="showHide();" value="Mostrar/ocultar div" />
</body>
</html>
Se oculta al clickar en el texto:
HTML:
<html>
<head>
<!--- INCLUIMOS JQUERY -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<!-- DEFINIMOS LA FUNCION QUE EJECUTARA EL BOTON -->
<script type="text/javascript">
function showHide(){
$('#text').slideToggle();
}
</script>
</head>
<body>
<!-- EL DIV QUE SE MOSTRARA, SE OCULTA GRACIAS A ONCLICK -->
<div id="text" onClick="showHide();">
<p>Test</p>
</div>
</body>
</html>
Te he dejado los codigos un poco explicados.
Luego tambien si necesitas algo mas complejo se puede usar el segundo código haciendo que al hacer click y al ocultarse aparezca un botón para volver a mostrarlo o en el primer código hacer que el botón muestre "Ocultar" si el texto se está mostrando o que diga "Mostrar" si el texto está oculto, si necesitas ayuda con algo de eso, dímelo.
Espero que te sirva.
