Gracias por la "semi-ayuda", David el Grande
Finalmente seguí tu consejo y busqué info en otra web (vagabundia.blogspot.com/2008/01/sidebar-explicada.html) y logré crear el efecto que quería pero con otro script.
Dejo un resumen de la explicación por si alguien está buscando ayuda con este tema:
...Sólo necesitamos un poco de CSS y un pequeño script que agregamos en la plantilla antes de </head> y que nos permite permutar la propiedad de un elemento entre dos estados, oculto y visible, cambiando la propiedad display.
ESTO ANTES DE </HEAD>
<style type='text/css'>
.elementoVisible {display:block;}
.elementoOculto {display:none;}
.linkContraido {
... propiedades de estilo para fuentes o imágenes ...
}
.linkExpandido {
... propiedades de estilo para fuentes o imágenes ...
}
</style>
<script type='text/JavaScript'>
function desplegarContraer(cual,desde) {
var elElemento=document.getElementById(cual);
if(elElemento.className == 'elementoVisible') {
elElemento.className = 'elementoOculto';
desde.className = 'linkContraido';
} else {
elElemento.className = 'elementoVisible';
desde.className = 'linkExpandido';
}
}</script>
La idea es sencilla, tenemos dos bloques DIV; en uno hay un enlace y en el otro el contenido a mostrar/ocultar. El enlace tiene, por defecto la clase linkContraido y el contenido, la clase elementoOculto. Cuando hacemos click en el enlace, el script cambia las clases de ambos, es decir, sus propiedades. El enlace será de la clase linkExpandido y el contenido de la clase elementoVisible. De esta manera, en un solo paso hacemos visible el contenido y podemos cambiar la forma de ver el enlace.
Supongamos que estas son las propiedades del enlace:
.linkContraido {color: blue;}
.linkExpandido {color: red;}
Se mostrará en color azul. Cuando hacemos click, se pondrá rojo y se mostrará el contenido. Lo mismo podemos hacer cambiando la imagen de fondo
Lo implementamos creando un elemento HTML y escribiendo el código necesario. Esquemáticamente:
ESTO DENTRO DEL ELEMENTO HTML QUE CONTIENE LOS OBJETOS A LOS QUE QUEREMOS APLICAR EL EFECTO
<div class="linkContraido" onclick="desplegarContraer('contenedorExterno',thi s);">ENLACE</div>
<div id="contenedorExterno" class="elementoOculto">
<div>.... el contenido interno ...</div>
</div>
ADEMÁS PODEMOS IR UN PASO MÁS ALLÁ...
Podemos anidar elementos ocultos con facilidad, agregando enlaces y elementos ocultos en los contenidos:
<div class="linkContraido" onclick="desplegarContraer('contenedorExterno',thi s);">ENLACE 1</div>
<div id="contenedorExterno" class="elementoOculto">
<div class="linkContraido" onclick="desplegarContraer('contenedorInterno_1',t his);">ENLACE 2</div>
<div id="contenedorInterno_1" class="elementoOculto">
<div>... el contenido 1 ...</div>
</div>
<div class="linkContraido" onclick="desplegarContraer('contenedorInterno_2',t his);">ENLACE 3</div>
<div id="contenedorInterno_2" class="elementoOculto">
<div>... el contenido 2 ...</div>
<div class="linkContraido" onclick="desplegarContraer('contenedorInterno_3',t his);">ENLACE 4</div>
<div id="contenedorInterno_3" class="elementoOculto">
<div>... el contenido 3 ...</div>
</div>
</div>
</div>