Si ya os conté cómo evitar conflictos entre jQuery y Mootools, hoy os explico para qué estaba usando jQuery en el nuevo diseño.

Probablemente os habréis fijado en el link que dice Sidebar, en el index del blog. Pues bien, este link despliega la sidebar superior del blog.

Para añadir este efecto a tu web debes seguir unos pasos sencillos, comenzando por descargar jQuery.

Ahora abrimos el archivo en el que queremos añadir el efecto.

El código Javascript

Nos situamos en antes del </head> y añadimos las siguientes líneas:

<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".boton").click(function(){
$("#desplegable").slideToggle("slow");
});
$("#desplegable").css({ display: 'none' });
});
</script>

La primera línea llama a jQuery, tened en cuenta que la URL al archivo debe ser la correcta, sino no funcionará.

La tercera indica que se realicen las acciones una vez la página esté cargada.

La cuarta determina qué clase llevará el link que activará el efecto (.boton es una clase, si fuese #boton sería una id) e inicia una condición.

La quinta indica qué id tiene la capa que se ocultará / mostrará, e inicia el efecto.

La sexta cierra la condición iniciada en la cuarta línea.

La séptima no es necesaria.  Lo que hace es ocultar la capa. Podría hacerlo mediante CSS, pero en caso de no estar activado javascript no se mostraría nada, mientras que en este caso si no estuviese el javascript activado se vería la capa, pero sin efecto.

La octava línea indica al script el fin de las acciones que debe llevar a cabo jQuery.

Podemos personalizar un poco más el script, cambiando en la línea 10 slow por normal o fast (para modificar la velocidad del efecto).

El código HTML

Lo último que nos queda es añadir el código HTML correspondiente al link de ocultar / mostrar y al contenido que se ocultará / mostrará.

Comenzaremos con el enlace, que debe tener de clase boton. El código que uso yo para el enlace es:

<a href="#" class="boton">Ver / Ocultar contenido</a>

Pero se pueden hacer variaciones, lo único necesario es la clase boton.

Ahora añadimos la capa con id desplegable, que será la que se ocultará y se mostrará. El código que uso yo es:

<div id="desplegable">
<h2>Contenido oculto</h2>
<p>Sólo verás este contenido si despliegas el panel.</p>
</div>

Como antes, este código se puede variar.

Y ya tenemos completo el efecto.

Demo

Podéis ver el efecto en este mismo blog (en la sidebar superior) o en esta página de demostración.