En este tutorial explicaré como hacer aparecer secciones de un formulario o cualquier otro elemento de nuestro sitio usando jquery, yo lo suelo usar cuando tengo un formulario de búsqueda y deseo mostrar opciones de búsqueda avanzada por ejemplo o también es posible usarlo a modo de acordeón
Ocultar un elemento
Si bien es cierto que podemos ocultar un elemento cualquiera lo mejor es colocar un div que agrupe el elemento o elementos que deseamos ocultar si es un formulario y estas basado en una estructura de OL/UL y LI le asignamos u ID a es LI que deseamos ocultar, nuestro código sería algo así:
1 2 3 4 5 |
Nuestro código jquery para detectar que se ha hecho click sería:
1 2 3 4 5 6 7 8 9 10 11 12 | $(document).ready(function(){ estado=0; $("#oculta").click(function () { if(estado==0) { $('#paraocultar').slideUp('fast'); estado=1; } else { $('#paraocultar').slideDown('fast'); estado=0; } }); }); |
muy util en muchas cosas ademas de formularios, excelente material, con un caption o label arriba que indique “click aqui para desplegar” como otros de acordeon, queda perfecto, un codigo corto, entendible y muy practico.
saludos.
perdon lo olvidaba, no habria mucho problema si se quisiese que en vez de un evento click sea con el paso del mouse sobre el area? algo asi como en la web de nvidia.
saludos.
Se puede usar este codigo con absolutamente cualquier evento keypress, hover, keydown, onload, etc simplemente cambia el nombre del evento al que requieres, mas información en docs.jquery.com (events)
Hola,
Me parece formidable este articulo. Tengo pensado usarlo en mi pagina http://www.xxxx.xxx pero me gustaria saber si es posible una cosa. Cuando se entra en una pagina que este escondida la zona oculta y al darle click a mostrar contenido, salga la parte oculta a visible. Eso es posible? Como se puede hacer?
Ahora veo que es justo al reves.
Es muy simple en tu hoja de estilos pon ese div como oculto display:none; y la variable estado=0; la pones como estado=1;