SlideToggle – Crear un panel deslizable con jQuery

jQuery dispone de una función que nos permite mostrar u ocultar contenido con efecto slide con la lógica de que si el contenedor no está visible se muestra con slideDown y si está visible se oculta con slideUp. Se trata de la función slideToggle().

En el ejemplo que vamos a ilustrar vamos a tener varios panales ocultos con su elemento para mostrarlos y ocultarlos en distintas posiciones de la página.

Los paneles se caracterizarán por tener 2 contenedores tal como se muestra a continuación:

<div class="panel">
   <!-- Your Content Panel -->
</div>
<div class="flip">Show/Hide Panel</div>

En el contenedor identificado con el class=»panel» tendremos el contenido que se visualizará o esconderá y el contenedor identificado con el class=»flip» tenemos el simulador de enlace para mostrar u ocultar el panel. Dentro del panel podemos añadir cualquier contenido HTML, imágenes, videos, etc.

El código jQuery que se utiliza para realizar esta acción es el siguiente:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){
    $(".flip").click(function(){
        $(".panel").slideToggle("slow");
    });
});
</script>

Ver ejemplo en funcionamiento