ejemplo del efecto Persiana con JQuery

ejemplo del efecto Persiana con JQuery

ejemplo del efecto Persiana o cortina con JQuery

en el siguiente código te muestro cómo hacer el efecto persiana o cortina divs de una pagina

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#titulo").click(function(){
$("#panel").slideDown();
});
});
</script>

<style>
#panel, #titulo {
padding: 5px;
text-align: center;
background-color: #e5eecc;
border: solid 1px #c3c3c3;
}
#panel {
 padding: 50px;
 display: none;
}
</style>
</head>
<body>
 <div id="titulo">Nombre del producto</div>
 <div id="panel">Detalle del producto</div>
</body>
</html>

lo primero que has de observar es que en la parte del cuerpo en la parte de abajo del código tienes un div identificado como título donde pondríamos el nombre del producto y un div identificado como panel en el que pondríamos el detalle del producto

también a tener en cuenta los estilos CSS que se han aplicado y fíjate que el DIV del panel tiene la propiedad display : none

en la parte de programación de jQuery vemos cómo una vez utilizado el método ready del documento para asegurarnos que todo el documento está cargado,  ponemos a la escucha el evento Click del DIV llamado título para que cuando pulsen en el , un DIV identificado como panel se mostrará.

puedes utilizar el método slideUp the jQuery para ocultar otra vez el panel

  $("#panel").slideUp();

Y si lo que estás buscando es un efecto combinado es decir una especie de interruptor que visualice u  oculte el panel , utiliza el método slideToggle()

 

  $("#caja2").slideToggle();