Webmaster Libre | Divs que aparecen y desaparecen

¿Te gusta el efecto?

Sigue leyendo para aprender a crearlo tu mismo o descarga el archivo tgdiv.tar.gz que contiene este ejemplo completo, con su script y su hoja de estilo. Utilizalo como mejor te convenga, dudo que se puedan poner restricciones al uso de una función tan sencilla (y si se pudiese ¿qué nos importa?).

Si te resulta de utilidad quizá quieras incluir un enlace a Webmaster Libre en algún lugar de tu página. Te lo agradeceré en el alma

Introducción

Hace unos días llegaba a portada de Digg un artículo escrito por Harry Maugans: How to Create a Collapsible DIV with Javascript and CSS. En principio me sorprendió que un script tan simple lograse tanto eco pero lo que más me sorprendió es que utilizase cosas tan intrusivas como display: none en la hoja de estilo para ocultar inicialmente el div y el evento onclick en un elemento a del html.

Ya que las mejoras que podían hacersele eran igualmente sencillas, me decidí y aquí estamos.

Primero el HTML

Primero vamos a crear el HTML, que será, basicamente, algo así:

<html>
<head>
...
<link rel="stylesheet" type="text/css" href="estilo.css" />
</head>
<body>
<a id="tglink" href=" ">Mostrar/Ocultar</a>
<div id="div-a">
...
</div>

</body>
</html>

Obviamente, donde los puntos suspensivos puedes incluir lo que se te ocurra. Piensa, eso si, que oculto o no ese div será cargado con el resto de la página.

Ahora el estilo

Vamos a dar estilo a los elementos pensando en que, si un usuario no tiene habilitado el Javascript no tendrá acceso al efecto. Por ello, no utilizaremos display: none para ocultar inicialmente el bloque si no que lo haremos visible y, después, lo ocultaremos con javascript para crear el efecto.

De esta manera nos aseguramos de que el contenido es accesible para todos


#div-a {
width: 90%;
margin: 1em auto;
}

a#tglink {
	background-color: #000;
	margin: 0 1em;
	padding: 0.5em;
	color: #fff;
	text-decoration: none;
	}

a#tglink:hover, a#tglink:active, a#tglink:focus {
	color: red;
	}

Y finalmente, la guinda: el javascript

Con lo que llevamos hecho hasta ahora tenemos una página perfectamente funcional pero nos falta el toque de javascript y a eso es a lo que ibamos ¿no?

Creamos nuestro archivo tgdiv.js (ponle el nombre que quieras, a mi se me da mal esto de bautizar cosas) y empezamos a escribir nuestro script

El script estará basado en tomar elementos por su id y modificar su display (visible-oculto-visible) cuando un usuario pulse sobre determinado enlace.

Por comodidad, empezaremos por definir dos variables que corresponderán a los dos elementos que vamos a poner en juego, el div y el enlace

function tgdiv() {
var di = document.getElementById('div-a');
var tg = document.getElementById('tglink');
}

Como ya habrás visto, utilizamos los id de los elementos tanto para el CSS como para el Javascript

Ocultamos el div para los usuarios con el Javascript habilitado

function tgdiv() {
var di = document.getElementById('div-a');
var tg = document.getElementById('tglink');
di.style.display = 'none';
}

Y ahora creamos el efecto haciendo que al pulsar el enlace se muestre el div si este está oculto o se oculte si es visible (exactamente como hacía Harry Maugans en su script salvo que nosotros incluimos el evento onclick en el javascript eliminándolo del html)

function tgdiv() {
var di = document.getElementById('div-a');
var tg = document.getElementById('tglink');
di.style.display = 'none';
tg.onclick = function() {
if (di.style.display == 'none')
		{
			di.style.display='block';
		}else{
			di.style.display = 'none';
		}
	}
}

Sólo nos queda indicarle a la función que debe iniciarse cuando termine de cargar la página

function tgdiv() {
var di = document.getElementById('div-a');
var tg = document.getElementById('tglink');
di.style.display = 'none';
tg.onclick = function() {
if (di.style.display == 'none')
		{
			di.style.display='block';
		}else{
			di.style.display = 'none';
		}
	}
}

window.onload = tgdiv;

Y cargar el script en la página en la que queremos usarlo

<head>
...
<link rel="stylesheet" type="text/css" href="estilo.css" />
<script type="text/javascript" src="tgdiv.js"></script>
</head>

Conclusión:

Como véis, a diferencia del script de Harry, nosotros mantenemos separadas las tres capas de la web: contenido, presentación y comportamiento.

Estoy segura de que existen formas mucho más eficaces de hacer esto mismo, incluso utilizando librerías pero, sin duda, esta es una función sencilla que puede ayudarnos a dar un toque especial a nuestra página.

Si quieres hacer alguna correción o consulta dirígete a los comentarios de la entrada relacionada con este ejemplo en Webmaster Libre: Divs que aparecen y desaparecen con javascript

Divs que aparecen y desaparecen