Hola,
Hice algo así, pero por el tiempo me permití hacerlo usando jquery porque 1) es mucho más rápido, y 2) ya tenía algo medio empezado.
Es posible hacerlo sin jquery, para lo cual es recomendable que en vez de redescubrir el hilo negro usar algunas de las funciones ya existentes para añadir elementos, asignar eventos y mostrar/ocultar, por ejemplo insertAfter() , addEvent() y toggle(). Las tres están disponibles en una sola entrada del blog de Dustin Diaz:
http://www.dustindiaz.com/top-ten-javascript/
Con jquery sería así:
Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="generator" content="PSPad editor, www.pspad.com">
<style type="text/css">
h3 {
width: 50%;
color: white;
background-color: black;
margin: 0;
display: block;
}
h3 + img {
position: relative;
top: -20px;
left: 45%;
}
</style>
<script type="text/javascript" src="../js/jquery-latest.pack.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
//agrega después de cada h3
var botones = '<img src="boton_restaurar.gif" alt="Mostrar/Ocultar" class="switch" />';
$("h3").after(botones)
//esconde los elementos con la clase toggable
$(".toggable").hide();
//le asignamos una función a la clase switch
$(".switch").click(function()
{
//el secreto está en el next.
$(this).next(".toggable").toggle("slow");
});
});
</script>
<title>Botones no intrusivos</title>
</head>
<body>
<h3>Lista 1</h3>
<ul class="toggable">
<li>bla</li>
<li>bla bla</li>
<li>bla bla bla</li>
</ul>
<h3>Lista 2</h3>
<ul class="toggable">
<li>ble</li>
<li>ble ble</li>
<li>ble ble ble</li>
</ul>
<h3>Lista 3</h3>
<ul class="toggable">
<li>bli</li>
<li>bli bli</li>
<li>bli bli bli</li>
</ul>
<h3>Lista 4</h3>
<ul class="toggable">
<li>¿Que dijeron? "Sigue blo", pues no. Este es nomás para despistar. Abuzados.</li>
</ul>
</body>
</html>
Y el ejemplo funcionando:
http://robertobaca.net/ejemplos/boto...les.jquery.htm
Tal vez me compliqué un poco con el css.