Hace un tiempo publiqué un tutorial explicando como como ocultar o mostrar un elemento, pero también es posible hacerlo con múltiples elementos sin tener que agregar un script por cada elemento, para eso hay que usar id que identifiquen a los elementos y clases para conocer su estado.
Simplemente con fines didácticos he planteado el ejemplo usando el evento onclick y usando clases sin embargo es posible simplificarlo mucho más asignando el click desde jquery y no usando clases sino atributos.
El HTML de los elementos
[cc lang=»html»]
[/cc]
Es posible usar cuantos elementos se requieran y puede usarse cualquier tipo de elemento no exclusivamente div, basta que les pongamos un id y la clase que me indica su estado (visible/invisible)
Para el menu que muestra u oculta los elementos, sería el siguiente script:
[cc lang=»html»]
[/cc]
La función para ocultar/mostrar usando jquery
Como vemos el menu invoca a una función llamada «oculta» y le envía como parámetro el id del elemento que queremos ocultar o mostrar según sea el caso, una vez que capturamos ese elemento pasamos a verificar si esta o no visible para finalmente aplicarle una pequeña animación según sea el caso.
[cc lang=»javascript»]
function oculta(elemento) {
///// capturamos el elemento
item=$(«#»+elemento);
///// verificamos su estado
if($(item).hasClass(‘visible’)) {
$(item).removeClass(‘visible’);
//// cambiamos su estado
$(item).addClass(‘invisible’);
//// animamos
$(item).slideUp(‘fast’);
} else {
$(item).removeClass(‘invisible’);
$(item).addClass(‘visible’);
$(item).slideDown(‘fast’);
}
}
[/cc]
