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.
Ricardo dijo: (el 10/8/2009 a las 0:25)
Gracias…
Luis Catsro dijo: (el 26/3/2010 a las 3:59)
Que tendria que hacer, si quiero en la misma pagina varios link, cada uno desplegando su capa correspondiente?
Sumolari dijo: (el 26/3/2010 a las 23:48)
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>
Luis Catsro dijo: (el 31/3/2010 a las 21:46)
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…….
Sumolari dijo: (el 1/4/2010 a las 9:06)
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.
RmnXCrack dijo: (el 29/12/2010 a las 0:38)
no funciona en el IE tampoco sin los puntos y comas del final, sabes como solucionarlo?
Sumolari dijo: (el 29/12/2010 a las 9:29)
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 ;.
Esteban dijo: (el 31/1/2011 a las 21:09)
sacale la coma en la linea
$("#desplegable2").css({ display: 'none', });
despues del none.
Sumolari dijo: (el 31/1/2011 a las 23:01)
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!
steve dijo: (el 4/2/2011 a las 2:00)
como hago que se despliegue para arriba???
Matias dijo: (el 12/2/2011 a las 20:08)
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.
Danie dijo: (el 13/7/2011 a las 12:34)
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?
Sumolari dijo: (el 13/7/2011 a las 13:57)
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?
Jesus dijo: (el 10/10/2011 a las 21:42)
Fabuloso el ejemplo, solo una duda para realizar un numero N de capas como le haria?
cesar dijo: (el 6/11/2011 a las 18:28)
y si quiero que se deslize pero hacia arriba como hago?
Manderly dijo: (el 20/11/2011 a las 18:57)
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 !!!