Ventana deslizante

[mafty_erin]

Saludos

Estoy viendo la siguiente página y tiene un efecto que me gusta:

http://webseo.cl/

En la parte de arriba, donde dice "ventas", al hacer click se despliega una ventana con varios pasos a seguir para comprar. ¿Cómo se puede hacer eso? imagino que es con jquery porque al ver el código de la página tiene varios plugins de jquery instalados, pero no puedo dar con el plugin exacto para ese efecto en particular.

¿Saben algo al respecto?

[Alexis88]

Veo que utilizan este plugin: https://iosscripts.com/iosslider/

Solamente debes armar tus secciones con el contenido que desees, le añades enlaces si gustas y luego aplicas los estilos y código JS que se indica en la misma página. Ten en cuenta que es un plugin de pago, no es gratuito.

Saludos

[mafty_erin]

¿Pero el "iosslider" no es el que usan para el slider de fotos al principio de la página? ¿estás seguro?

[Alexis88]

Ah caray, creí que preguntabas por el slider.

Lo que buscas hacer se logra con un poco de jQuery. Puedes modificar dinámicamente los estilos de la sección que se despliega con alguno de los métodos que ofrece jQuery, por ejemplo, animate:

Código Javascript:

$("button").click(function(){
    $("section").animate({height: "toggle"}, 800);
});
 

Aquí puedes ver un pequeño ejemplo (que puede ser mejorado, lo hice con algo de prisa).

Saludos

[mafty_erin]

Gracias por el ejemplo, está muy bueno.

¿Cómo lo harías con divs?

[Alexis88]

Solamente cambia la palabra section por div o si quieres evitar conflictos con otros Divs, puedes tomarlo por su id.

Código HTML:

<div id = "miDiv">
    <!-- Aquí va la información que deseas mostrar -->
</div>
 

Código Javascript:

$("button").click(function(){
    $("#miDiv").animate({height: "toggle"}, 800);
});
 

Saludos