Juglar / v.CIII

En la mayoría de ocasiones, tener un div oculto que se abre pulsando un enlace o un botón obedece más a un interés estético que práctico, pero también había que plantearse cómo se hace, aunque no tenga ni idea de javascript.

Observen el ejemplo en Planeta Código, que creo que es suficientemente simple e intuitivo.

El javascript:
<script type="text/javascript">
// definiciones basicas
OCULTO="none";
VISIBLE="block";
function mostrar(blo) {
document.getElementById(blo).style.display=VISIBLE;
document.getElementById('ver_off').style.display=VISIBLE;
document.getElementById('ver_on').style.display=OCULTO;
}
function ocultar(blo) {
document.getElementById(blo).style.display=OCULTO;
document.getElementById('ver_off').style.display=OCULTO;
document.getElementById('ver_on').style.display=VISIBLE;
}
</script>

El HTML que proponen:
<div id="ver_on"><a href="#" onclick="mostrar('bloque')">Ver más</a></div>
<div id="ver_off" style="display: none"><a href="#" onclick="ocultar('bloque')">Ver menos</a></div>
<div id="bloque" style="display: none">Texto a mostrar u ocultar</div>

Y para finalizar, mi intento de adaptarlo a un menú para el blog (ver demo), que también funciona y valida:
<div id="botonmenu">
<a id="ver_on" href="#" onclick="mostrar('bloque')">Abrir menú</a>
<a id="ver_off" style="display: none" href="#" onclick="ocultar('bloque')">Cerrar menú</a>
<ul id="bloque" style="display: none">
<li><a href="http://juglar103.blogsome.com/archivos/" title="Listado de todos los posts">Archivos</a></li>
<li><a href="http://www.bloglines.com/public/Juglar" title="Los blogs que sigo con Bloglines">BlogRoll</a></li>
<li><a href="http://del.icio.us/juglar103/" title="Mis enlaces favoritos en del.icio.us">Enlaces</a></li>
<li><a href="mailto:{the_author_email}" title="Correo electrónico">Contacto</a></li>
<li><a href="#menu" title="Menú">Más cosas</a></li>
</ul>
</div>

Alternativas para mostrar y esconder un div con javascript:
Showing and Hiding a DIV using CSS and Javascript - netlobo.com
domCollapse
Artículos CSS / Hojas de estilo - Capas visibles e invisibles
JS Popups with Computed Absolute Positioning
Modded Up: Slide In, Slide Out, ala Digg
Ryan J Lowe’s Dev Blog » Blog Archive » LITBox

Technorati tags: div, javascript, menu, juglar103, Juglar