Sidebar explicada

Hace unos días, A su Imaginación me preguntaba por la forma en que mostraba y ocultaba elementos en la sidebar y es el momento de intentar una respuesta.

Hay tres modelos diferentes, uno en Autopromo, otro en el Buscador y el último en Archivos. Vamos con el primero que es el más sencillo de implementar. 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.

<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 == &#39;elementoVisible&#39;) {
      elElemento.className = &#39;elementoOculto&#39;;
      desde.className = &#39;linkContraido&#39;;
    } else {
      elElemento.className = &#39;elementoVisible&#39;;
      desde.className = &#39;linkExpandido&#39;;
    }
  }</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:

MOSTRAR/OCULTAR

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Lo implementamos creando un elemento HTML y escribiendo el código necesario. Esquemáticamente:

<div class="linkContraido" onclick="desplegarContraer('contenedorExterno',this);">ENLACE</div>
<div id="contenedorExterno" class="elementoOculto">
  <div>.... el contenido interno ...</div>
</div>

Podemos anidar elementos ocultos con facilidad, agregando enlaces y elementos ocultos en los contenidos:

<div class="linkContraido" onclick="desplegarContraer('contenedorExterno',this);">ENLACE 1</div>
<div id="contenedorExterno" class="elementoOculto">

  <div class="linkContraido" onclick="desplegarContraer('contenedorInterno_1',this);">ENLACE 2</div>
  <div id="contenedorInterno_1" class="elementoOculto">
    <div>... el contenido 1 ...</div>
  </div>

  <div class="linkContraido" onclick="desplegarContraer('contenedorInterno_2',this);">ENLACE 3</div>
  <div id="contenedorInterno_2" class="elementoOculto">
    <div>... el contenido 2 ...</div>

    <div class="linkContraido" onclick="desplegarContraer('contenedorInterno_3',this);">ENLACE 4</div>
    <div id="contenedorInterno_3" class="elementoOculto">
      <div>... el contenido 3 ...</div>

    </div>
  </div>

</div>

MOSTRAR/OCULTAR

MOSTRAR/OCULTAR

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

MOSTRAR/OCULTAR

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

MOSTRAR/OCULTAR

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.