mostar DIV y ocultar el resto de DIV's

[marlowe]

Hola, tengo un pequeño listado de 5 items, que al clicar sobre cada uno de ellos se muestra un div con una pequeña información, lo que quiero es que al clicar sobre uno de ellos si hay otro visible que se oculte y solo se muestre el que he clicado.
Tengo ésta función que es la que me expande o contrae los div, pero me lo hace uno por uno... no sé si es posible que al clicar sobre uno me oculte el resto de div y me muestre el que interesa.

function expandCode(id){
var parent = document.getElementById(id);

if (parent.style.display === 'none' || parent.style.display === ''){
parent.style.display = 'block';
} else {
parent.style.display = 'none';
}
}


el código html:

<a href="#" onclick="expandCode('news1'); return false;">News 1</a>
<div class="text1" id="news1">
bla bla
</div>

<a href="#" onclick="expandCode('news2'); return false;">News 2</a>
<div class="text1" id="news2">
bla bla
</div>

<a href="#" onclick="expandCode('news3'); return false;">News 3</a>
<div class="text1" id="news3">
bla bla
</div>

<a href="#" onclick="expandCode('news4'); return false;">News 4</a>
<div class="text1" id="news4">
bla bla
</div>

<a href="#" onclick="expandCode('news5'); return false;">News 5</a>
<div class="text1" id="news5">
bla bla
</div>

Gracias de antemano!!!

[ElJavista]

Claro que se puede, el problema es que solo tomas funciones que encuentras por ahi y ni siquiera sabes como funcionan. Deberías al menos tratar de comprenderlas para que puedas aplicarlas según sea el caso. Bueno, no voy a darte un script en base al código que haz puesto, te daré otro ejemplo.

Bien, digamos que tenemos esto:

Código:

<ul id="menu">
  <li> <a href="JavaScript:;" class="actual" onclick="setContenido(0);">Uno</a></li>
  <li> <a href="JavaScript:;" onclick="setContenido(1);">Dos</a></li>
  <li> <a href="JavaScript:;" onclick="setContenido(2);">Tres</a></li>
</ul>
<div id="contenidos">
   <div>Contenido 1</div>
   <div>Contenido 2</div>
   <div>Contenido 3</div>
</div>

Vemos que hay un menu (obviamente al cual se le debe poner estilos para que paresca un menu) y tres contenedores de contenidos (valga la redundancia) los cuales están dentro de otro div de id "contenidos". Al darle click a cualquier item debe aparecer el contenido correspondiente y ocultar los otros. Para esto se necesita nada más que esta función:

Código:

function setContenido(n) {
   var menus = document.getElementById('menu').getElementsByTagName('a');
   var contents = document.getElementById('contenidos').getElementsByTagName('div');

   for (var i = 0; i < 3; i ++) {
       menus[i].className = '';
       contents[i].style.display = 'none';
   }

   menus[n].className = 'actual';
   contents[n].style.display = 'block';
}

Bien, eso hará el trabajo. Al principio se referencia todos los items del menú y se quita sus clases, y también se refernecia a todos los div contenedores y se les cambia su estilo a display none para que se oculten. Despues solo al item y contenedor correspondiente se le da la clase y el estilo que se necesita. La clase del item sirve para cambiarle el estilo de modo que paresca seleccionado, normalmente es un cambio en el color de fondo.

Recuerda, si coges funciones por ahi y la quieres aplicar sin entenderlas en varios casos te puede servir pero es algo limitante porque en muchas ocasiones se deben adaptar los codigos. Espero que te sirva.

[buzu]

ElJavista, estás desperdiciando valiosos recursos con un loop. Nada serio en este caso, pero si una pesadilla si tienes muchos elementos. Además, no veo por que usar una clase para luego ir y usar la propiedad style para cambiar los estilos del documento. No es mejor simplemente definir la clase con los estilos que queremos y de esa manera evitar el uso de style?

Lo del loop se resuelve fácilmente. Basta con llevar un registro de los elementos que están visibles. Para eso basta con declarar una variable en la cual almacenamos una referencia al elemento actualmente visible, cuando queramos poner otro visible y ocultar el actual, no necesitaremos recorrer todos los elementos y cambiarlos todos a invisibles haciendo trabajo redundante, simplemente bastará con hacer algo como:

mivariable.className = 'noVisible';

en donde mivariable es la variable que lleva el registro de los elementos visibles y noVisible es la clase que contiene las instrucciones para ocultar el elemento y hacer cualquier otro tipo de cambios necesarios.

[Adler]

Yo monté esto hace tiempo

Código javascript:

<html>
<style type="text/css">
.ocultar {display:none;}
.mostrar {display:block;}
.sel {color:#FF0000;}
.nosel {color:#000000;}
</style>
<script type="text/javascript">
var visto_subm = null;
var visto_color = null;
function ver(num) {
objhl = document.getElementById(num);
obj = document.getElementById("sub"+num);
 
obj.className = (obj==visto_subm) ? 'ocultar' : 'mostar';
objhl.className = (objhl==visto_color) ? 'nosel' : 'sel';
 
    if ((visto_subm != null) && (visto_color != null)) {
        visto_subm.className = 'ocultar';
        visto_color.className = 'nosel';
    }
 
visto_subm = (obj==visto_subm) ? null : obj;
visto_color = (obj==visto_color) ? null : objhl;
}
 
</script>
<head>
</head>
<body>
Se puede usar ver, ver1 y ver2 por separado<br /><br />
<div id="0" class="nosel" onclick="ver(this.id)" style="z-index:1;">MENU0</div>
<div id="sub0" class="ocultar" style="z-index:1;">
SubMenu0<br />
SubMenu0<br />
SubMenu0
</div>
 
<div id="1" class="nosel" onclick="ver(this.id)" style="z-index:1;">MENU1</div>
<div id="sub1" class="ocultar" style="z-index:1;">
SubMenu1<br />
SubMenu1<br />
SubMenu1
</div>
 
 
<div id="2" class="nosel" onclick="ver(this.id)" style="z-index:1;">MENU2</div>
<div id="sub2" class="ocultar" style="z-index:1;">
SubMenu2<br />
SubMenu2<br />
SubMenu2
</div>
 
 
<div id="3" class="nosel" onclick="ver(this.id)" style="z-index:1;">MENU3</div>
<div id="sub3" class="ocultar" style="z-index:1;">
SubMenu3<br />
SubMenu3<br />
SubMenu3
</div>
 
</body>
</html>
 

Suerte

[ElJavista]

Iniciado por buzu

ElJavista, estás desperdiciando valiosos recursos con un loop. Nada serio en este caso, pero si una pesadilla si tienes muchos elementos. Además, no veo por que usar una clase para luego ir y usar la propiedad style para cambiar los estilos del documento. No es mejor simplemente definir la clase con los estilos que queremos y de esa manera evitar el uso de style?

Lo del loop se resuelve fácilmente. Basta con llevar un registro de los elementos que están visibles. Para eso basta con declarar una variable en la cual almacenamos una referencia al elemento actualmente visible, cuando queramos poner otro visible y ocultar el actual, no necesitaremos recorrer todos los elementos y cambiarlos todos a invisibles haciendo trabajo redundante, simplemente bastará con hacer algo como:

mivariable.className = 'noVisible';

en donde mivariable es la variable que lleva el registro de los elementos visibles y noVisible es la clase que contiene las instrucciones para ocultar el elemento y hacer cualquier otro tipo de cambios necesarios.

Bueno, honestamente no sabía que estaba desperdiciando recursos usando un LOOP, pero ya veo porque, he leído sobre optimización en PHP pero nada en cuanto a JavaScript, supongo que tendrán conceptos similares, gracias por hacerme ver que mi código deja mucho que desear. Voy a comenzar a estudiar un poco eso de optimización en JavaScript. Gracias otra vez.

Ahora la pregunta es, por qué evitar el uso de style? podrías aclararme eso?

[buzu]

cada vez que usas style, ya sea para cambiar el color de letra, de fondo, el tamaño etc.. la pagina sufre un proceso de re-dibujado y cada vez que eso pasa el navegador tiene que hacer, entre otras cosas, cálculos para saber como representar la página. Es ahí precisamente donde esta el problema. Si todo lo haces con una clase, el navegador simplemente agrega la clase y hace el los cálculos solo una vez. Eso es a grandes rasgos, claro que ya investigando un poco más puedes encontrar más info al respecto y en base a eso hacer tus decisiones. Yo simplemente sugiero que style se use lo menos posible y que se evite su uso siempre que se pueda.

[ElJavista]

Genial, una explicación sencilla y clara. Gracias por tus sugerencias.

[buzu]

Para eso estamos en el for...