Ulzurrun de Asanza i Sàez

Crea un panel deslizante con jQuery

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:

[html]
<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>
[/html]

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:

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

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:

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

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.


19 replies on “Crea un panel deslizante con jQuery

  1. Gracias… :-)

  2. Que tendria que hacer, si quiero en la misma pagina varios link, cada uno desplegando su capa correspondiente?

    1. Es bastante simple, repite el código Javascript:
      <code><pre>
      $(document).ready(function(){
      // Primer link
      $("#boton1").click(function(){
      $("#desplegable1").slideToggle("slow");
      });
      $("#desplegable1").css({ display: 'none', });
      // Segundo link
      $("#boton2").click(function(){
      $("#desplegable2").slideToggle("slow");
      });
      $("#desplegable2").css({ display: 'none', });
      });
      </pre></pre>
      Y el HTML:
      <code>
      <pre>
      Ver / Ocultar contenido
      <div id="desplegable1">
      <h2>Contenido oculto</h2>
      Sólo verás este contenido si despliegas el panel.
      </div>
      Ver / Ocultar contenido
      <div id="desplegable2">
      <h2>Contenido oculto</h2>
      Sólo verás este contenido si despliegas el panel.
      </div>
      </pre></code>

  3. Muchas gracias, genial!!!
    Pero ahora tengo otro problema, este codigo corre perfecto en Mozilla y Safari, pero no corre en Internet Explorer, solomarca un error: "Se esperaba un identificador, una cadena o un numero".

    Me podrian ayudar porfa…….

    1. Mmmm… creo que es porque en IE no se debe poner el último punto y coma en el código Javascript (en realidad creo que no es necesario nunca, pero en IE no funciona y en los demás navegadores sí).

      Prueba con este código:

      <code>$(document).ready(function(){

      // Primer link
      $("#boton1").click(function(){
      $("#desplegable1").slideToggle("slow");
      });
      $("#desplegable1").css({ display: 'none', });

      // Segundo link
      $("#boton2").click(function(){
      $("#desplegable2").slideToggle("slow");
      });
      $("#desplegable2").css({ display: 'none', });

      })</code>

      Si no es ese ";", prueba eliminando otros que estén al final del código.

  4. no funciona en el IE tampoco sin los puntos y comas del final, sabes como solucionarlo?

    1. En IE8 sí que funciona, ahora bien, no lo he probado en IE6 ni en IE7. Debería funcionar, pero si dices que no funciona, en fin, no sabría que decir aparte de quitar los ;.

  5. sacale la coma en la linea
    $("#desplegable2").css({ display: 'none', });

    despues del none.

    1. Tienes razón, se me escapó. Seguramente eliminando esa línea se solucionen los problemas con Internet Explorer.

      Además de actualizar el código, ya que estaba, he añadido el coloreado de la sintaxis para aclarar más el código.

      ¡Gracias por avisar!

  6. como hago que se despliegue para arriba???

  7. Hola, agradezco que compartan sus conocimientos, por mi parte comparto mi experiencia.
    he probado el código para hacer que los comentarios de cierta plantilla sean desplegables, estoy usando Jquery 1.4.4 y el resultado de la prueba no fué satisfactorio. Si bien cumple la función de desplegar los comentarios, lo hace de una manera bastante desprolija, con parpadeos y scrolls de la página indeseados, a demás de hacer un post del formulario de envio de comentarios contenido en el div desplegable.
    Saludos, Matias.

  8. Saludos, hize los pasos tal cual aqui y funciona pero por algun motivo me lleva al tope de la pagina, es como si cargara la pagina de nuevo.. alguien sabe por que? ;-( ;-(

    1. Sin ver el error es prácticamente imposible saber qué ocurre.

      ¿Podrías poner un enlace a la página donde se ve el error para poder revisarlo?

  9. Fabuloso el ejemplo, solo una duda para realizar un numero N de capas como le haria?

  10. y si quiero que se deslize pero hacia arriba como hago?

  11. Es un Panel estupendo y me funciona, solo que tengo varias opciones d eMenú en vertical y el panel me aparece encima de las Opciones del Menú y quiero que se desplacen hacia abajo para dejar hueco al Panel…pero no me sale asi. Qué estoy haciendo mal?
    Gracias y enhorabuena !!!

  12. Hola, entiendo que este post es de hace muchos años pero me serviría mucho si aún lo están siguiendo. Tal como a Danie al hacer que el contenido desplegado por el botón 1 empuja fuera del alto de la pantalla al botón 2, si quiero clickear en este último me vuelve la pantalla hasta arriba y para ver el contenido desplegado del boton 2 tengo que scrollear nuevamente para abajo.

    en este tiempo, alguien descubrió como resolverlo o alguna otra forma de lograr el mismo efecto?

    Muchas gracias!

    Saludos.

    1. Se que la respuesta llego bastante tarde, pero sirve para todo aquel que la lee

      Ese problema que vos tenes es porque, como dice la etiqueta a

      Ver / Ocultar contenido

      Es decir, al hacer clic sobre el botón, te redirecciona a una pagina vacía, que vendría a ser un error ya que no redirecciona a ningun lado.

      Para solucionar eso, lo que hice personalmente fue eliminar el href, dejándolo así:

      Ver / Ocultar contenido

    2. Se que la respuesta llego bastante tarde, pero sirve para todo aquel que la lee

      Ese problema que vos tenes es porque, como dice la etiqueta a

      Ver / Ocultar contenido

      Es decir, al hacer clic sobre el botón, te redirecciona a una pagina vacía, que vendría a ser un error ya que no redirecciona a ningun lado.

      Para solucionar eso, lo que hice personalmente fue eliminar el href, dejándolo así:

      Ver / Ocultar contenido

Leave a Reply to Hernan Cancel reply

Your email address will not be published.

Required fields are marked *

Your avatar