¿Cómo ocultar y ver varios DIV al mismo tiempo?

latin.developer · #1 (**permalink**) 27/09/2009, 15:08

Saludos.

Tengo una serie de <DIV> que quisiera ocultar y ver cuando haga clic a unos botones ya creados.

Los div serían algo como esto:

<div id="sitio" style="display:none">ubicacion</div>
<div id="sitio" style="display:none">ubicacion</div>
.
.
.
(varios más)

Las funciones que tengo son (están en <head>):

<script language="javascript" type="text/javascript">

</script>

Y los botones para ver u ocultar son:
[ <a href="javascript:VerUbicaciones('sitio');">ver ubicaciones</a> ]
[ <a href="javascript:OcultarUbicaciones('sitio');">ocu ltar ubicaciones</a> ]

Como verán, todos los div a ocultar o mostrar tienen el mismo id="sitio". Yo pensé que al llamar a la función ocultaría o mostraría todos al mismo tiempo y sucede que solo lo hace con el primero.

¿Pueden ayudarme con esto?

¡MUCHAS GRACIAS!

zerokilled · #2 (**permalink**) 27/09/2009, 15:21

lo que pasa es que mas de un elemento no puede tener el mismo ID, por eso solo te funciona en el primero. claro, en tu caso seria irracional asignar un ID distinto a cada <div> porque habria que llamar multiples veces la funcion. lo que puedes hacer es asignarle una clase y tomar todos los elementos que tengan la misma clase. existe el metodo document.getElementsByClassName pero desafortunadamente no existe en iexplorer aunque es facil corregir este aspecto.

Código:

if(!document.getElementsByClassName){
document.getElementsByClassName = function(className){
var regex = new RegExp(className);
var array = [];
var element = arguments[1] || document.documentElement;
	for(var elem = element.firstChild; elem != null; elem = elem.nextSibling){
	if(elem.nodeType != 1)continue;
	if(regex.test(elem.className)) array.push(elem);
	if(elem.hasChildNodes()) array = array.concat(arguments.callee(className, elem));
	}
return array;
}}

lo que te queda por hacer es asignarle clases a los <div> y modificar la funcion para buscar los elementos por clases e iterar por todos los <div>.

latin.developer · #3 (**permalink**) 27/09/2009, 17:12

Gracias por la respuesta. Aún me resulta confusa la solución que planteas y, si no sirve para IE, creo que tampoco sería alternativa.

He modificado un código que encontré por allí a ver si de esta manera funciona pero tampoco. Aquí lo pongo a ver si ustedes se iluminan con esto:

function VerUbicaciones(){
var a = document.getElementsById($lay);
for(var i = 0;i < a.length;i++){
document.getElementById(a[i]).style.display = 'block';
}
}

¿Podrá ese código funcionar con las correcciones que se le puedan hacer?

America|UNK · #4 (**permalink**) 27/09/2009, 17:19

Pues haz algo simple, podrías colocar todos los divs en uno solo con el id sitios

Código javascript:

Ver originalfunction mostrarOcultar(id,no){
    var obj = document.getElementById(id).getElementsByTagName("div"), n = "none", i;
    for( i=0; i < obj.length; i++){
        if(obj[i].className != no){
        var dis = obj[i].style;
        dis.display = dis.display == n ? "block" : n;
        }
    }
}

Código HTML:

<p><a href="javascript:mostrarOcultar('sitios','no')">ver ubicaciones</a></p>
<div id="sitios">
<div>Sitio 1</div>
<div class="no">Sitio 2</div>
<div>Sitio 3</div>
<div>Sitio 4</div>
</div>

Los divs que tienen la clase "no" no se ocultarán.

latin.developer · #5 (**permalink**) 27/09/2009, 17:44

MUCHAS GRACIAS AMERICA | UNK !!!

¡Funcionó de maravillas!

Gracias de nuevo.

latin.developer · #6 (**permalink**) 27/09/2009, 17:55

Ah! una pregunta importante!!!

¿Y si el DIV que NO quiero ocultar tiene una clase asignada y además tiene un id único?, no le puedo poner el class="no" :S

America|UNK · #7 (**permalink**) 28/09/2009, 09:47

Código javascript:

Ver originalfunction mostrarOcultar(id,exc){
    var obj = document.getElementById(id).getElementsByTagName("div"), 
    n = "none", i, d, s = "(\\s|", r = new RegExp(s+"^)"+exc+s+"$)");
    for( i=0; i < obj.length; i++){
        if(!r.test(obj[i].className)){
            d = obj[i].style;
            d.display = d.display == n ? "block" : n;
        }
    }
}

Código HTML:

<p><a href="javascript:mostrarOcultar('sitios','no')">ver ubicaciones</a></p>
<div id="sitios">
<div>Sitio 1</div>
<div class="estilo1 no">Sitio 2</div>
<div>Sitio 3</div>
<div class="reno">Sitio 4</div>
</div>