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; } }); }); |
//////// Actualización ///////
He modificado el script para funcionar con múltiples elementos, pueden ver el ejemplo aqui
[download id=»3″ format=»1″]
Demo
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;
Hola. Este post me ha resultado muy útil, sin embargo, quisiera saber como es que puedo utilizar varias veces la funcion en una misma pàgina, sin tener que repetir el script tantas veces como elementos quiera ocultar/aparecer. Quizas sea una pregunta básica, pero soy principiante, gracias por la respuesta y paciencia
En el ejemplo estoy usando un ID, pero si quisieras trabajar con muchos elementos lo mejor sería usar una clase como selector así se ocultarían todos. Si deben funcionar todos de forma independiente podrías agregar una clase visible y otra llamada invisible para comprobar el estado del elemento.
Hola, muy bueno el post.
He probado el ejemplo y me funciona genial para todos los navegadores. Sin embargo, el ejemplo opuesto, es decir, que salga primero oculto y se muestre después me funciona para todos los navegadores excepto en IE que no me muestra una imagen. Sabes a que puede ser debido?
hola mira intento hacer lo mismo pero con listbox me funciona en mozila y IE pero en chrome no este es el codigo si alguien me puede ayudar
1 (prueba.php)
Matricula
Sexo
.:seleccionar:.
Masculino
Femenino
Embarazo
.:seleccionar:.
SI
NO
segunda(funciones.php)
function mostrar(ante_emba)
{
var ante_emba = document.getElementById(ante_emba);
ante_emba.style.display = «block»;
alert(ante_emba.style.display);
}
function desaparecer(ante_emba)
{
var ante_emba = document.getElementById(ante_emba);
ante_emba.style.display = «none»;
alert(ante_emba.style.display);
}
En el titulo dice: AJAX ocultar mostrar secciones de nuestro sitio, pero no veo el uso de AJAX por ningún lugar