Jquery: ocultar mostrar varios elementos

Categories: javascript - Tags: AJAX, jquery

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

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:

1
2
3
4
5
6
7
8

<ul>
<li><a href="#" onclick="javascript:oculta('item1')">Oculta/Muestra</a></li>
<li><a href="#" onclick="javascript:oculta('item2')">Oculta/Muestra</a></li>
<li><a href="#" onclick="javascript:oculta('item3')">Oculta/Muestra</a></li>
<li><a href="#" onclick="javascript:oculta('item4')">Oculta/Muestra</a></li>
<li><a href="#" onclick="javascript:oculta('item5')">Oculta/Muestra</a></li>
<li><a href="#" onclick="javascript:oculta('item6')">Oculta/Muestra</a></li>
</ul>

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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

Demo

August 24, 2010 at 6:53 am

[...] /////// He modificado el script para funcionar con múltiples elementos, pueden ver el ejemplo aqui // under: Otros Tags: AJAX, javascript, jquery Digg it Add to del.icio.us Stumble it [...]

Mario san says:

August 31, 2010 at 4:24 pm

Hola, gracias por el tip! Estoy tratando de implementarlo, pero me genera un error de js, aqui mi codigo:

String.prototype.startsWith = function(str)
{return (this.match(“^”+str)==str)}

function oculta(elemento) {

var divs=document.getElementsByTagName(‘div’)
for (var i=0;i<divs.length;i++){
var strName = divs[i].id;

if (strName != '') {

if (strName.startsWith(elemento)) {
alert("|"+strName+"|");
///// capturamos el elemento
item=$("#"+strName);
///// 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');
}
}
}
}
}

Especificamente en "item=$("#"+strName);" donde me dice "Message: Object expected". El alert "alert("|"+strName+"|");" me da el nombre del div correctamente. Alguna idea por que no funciona?