Ocultar texto
El "mejor" ejemplo esta en la página principal de esta web. En las noticias hay un enlace que pone Leer más al pulsarle aparece o desparece un texto.
Voy a tratar de explicar como lo he logrado... para ello hace falta un poco de javascript, de CSS y como siempre de html.
Javascript
A mi personalmente me gusta meter todos las funciones javascript que uso en un archivo a aparte, por ejemplo ARCHIVO.js, y enlazarle, en el archivo html correspondiente:
<script src="ARCHIVO.js" type="text/javascript"></script>
De esta manera creo que carga antes y sobre todo tengo todo el javascript junto.
Concretamente la función display es la encargada de jugar con la ocultación o no, para ello mira la característica display de la capa en concreto y pone la contraria.
La función sería:
function cambiar(esto)
{
vista=document.getElementById(esto).style.display;
if (vista=='none')
vista='block';
else
vista='none';
document.getElementById(esto).style.display = vista;
}
En vista guardamos la visibilidad actual, que comparamos si es none la pasamos a block y sino viceversa. Por último aplicamos la nueva visibilidad.
El texto
Cuando escribos el texto que después ocultaremos lo englobaremos dentro de una capa, en el campo de id le pondremos un nombre único, ejemplo en este caso y en display indicamos que none para que por defecto este oculto.
<div id="ejemplo" style="display: none;"> texto... </div>
El enlace
El enlace sería:
<a href="#" onclick="cambiar('ejemplo'); return false;">Leer más</a>
Como se ve, se hace uso de la función onclick que llama a nuestra función cuyo argumento es el identificador de la capa.
