Creando un panel deslizante con jQuery

jQuery es realmente una herramienta potente que nos permite extender la funcionalidad del navegador para mejorar la experiencia del usuario de forma notable.

Uno de estos días dedicaré un análisis algo más extenso sobre la idoneidad de trabajar con jQuery + PHP y de qué ventajas reales nos ofrece.

Lo que hoy nos ocupa es un pequeño tutorial de cómo realizar de forma rápida y sencilla un vistoso panel deslizante que nos permita “mostrar” y “esconder” información a partir de una pestaña que aparezca en la parte superior de nuestra web.

En los siguientes fragmentos os muestro el código asociado a los 3 archivos que necesitáis tener:

#panel{
margin-top: 600px;
width: 100%;
height: 0px;
color: #999999;
background: #272727;
overflow: hidden;
position: relative;
z-index: 3;
} <div id="panel">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div class="panel_button" style="display: visible;"><img src="images/expand.png"  alt="expand"/> <a href="#">Login Here</a> </div>
<div class="panel_button" id="hide_button" style="display: none;"><img src="images/collapse.png" alt="collapse" /> <a href="#">Hide</a></div> $(document).ready(function() {
$("div#panel").height(0);
$("div.panel_button").click(function(){
$("div#panel").animate({
height: "200px"
});
$("div.panel_button").toggle();
});
$("div#hide_button").click(function(){
$("div#panel").animate({
height: "0px"}, "fast");
});
});

Si observamos el funcionamiento es realmente sencillo. Por un lado disponemos de una definición CSS para un elemento div de las dimensiones que queremos que sea nuestro panel con la propiedad “overflow:hidden”.

Gracias a esto y al height inicial de 0px, el panel no se mostrará inicialmente, mientras que el botón, que bien puede ser una pestaña en PNG, sí que aparecerá (su versión ON).

El archivo javascript es el que, obviamente, gestiona la funcionalidad, y lo hace mediante dos conceptos:

Cuando detecta un evento “click” sobre la pestaña (que no es más que una imagen) desencadena el funcionamiento: cambia los parámetros de height del panel de forma progresiva (dando la sensación de que el panel se desliza) y cambia la imagen de la pestaña a su versión OFF.

Sencillo, limpio y rápido.

Y ya sabéis, dudas o lo que necesitéis, en los comentarios.