Problema Script mostrar/ocultar divs

[oNefl0w189]

Hola compañeros. Tengo un script el cual utilizo para mostrar o ocultar un div cuando pulsen un boton, vamos lo típico de +Info que lo que hace es al darle mostrar un div con un contenido y al volver a darle ocultarlo.

El problema es que son 3 divs distintos, y para abrir el tercero (p.e) primero tengo que abrir el primero y el segundo.
Yo lo que quiero es que den al que den se abra, independientemente de si los otros estan abiertos o no.

Os dejo el codigo:

Código Javascript:

<script language="JavaScript">
function muestra_oculta(id){
if (document.getElementById){ //se obtiene el id
var el = document.getElementById(id); //se define la variable "el" igual a nuestro div
el.style.display = (el.style.display == 'none') ? 'block' : 'none'; //damos un atributo display:none que oculta el div
}
}
window.onload = function(){/*hace que se cargue la función lo que predetermina que div estará oculto hasta llamar a la función nuevamente*/
muestra_oculta('contenido_a_mostrar');/* "contenido_a_mostrar" es el nombre que le dimos al DIV */
muestra_oculta('contenido_a_mostrar1');
muestra_oculta('contenido_a_mostrar2');
}
</script>
 

Los botones que ejecutan la funcion:

Código HTML:

<a class="button" style='cursor: pointer;' onclick="muestra_oculta('contenido_a_mostrar')"><span><span>+ Info</span></span></a>
<a class="button" style='cursor: pointer;' onclick="muestra_oculta('contenido_a_mostrar1')"><span><span>+ Info</span></span></a>
<a class="button" style='cursor: pointer;' onclick="muestra_oculta('contenido_a_mostrar2')"><span><span>+ Info</span></span></a>
 

Y los divs:

Código HTML:

<div id="contenido_a_mostrar">
<h2>Acerca de nuestros proyectos</h2>
</div>
 

[maycolalvarez]

para eso los 3 divs no deben estar anidados unos dentro de otro, no veo el problema

[Snoopy1413]

el.style.display = (el.style.display == 'none') ? 'block' : 'none'; Esto da NULL intenta hacerlo de otra forma =)

[oNefl0w189]

Iniciado por maycolalvarez

para eso los 3 divs no deben estar anidados unos dentro de otro, no veo el problema

No estan anidados, te dejo el html.

Código HTML:

<div  id="contenido_a_mostrar">
<h2>Acerca de nuestros proyectos</h2>
</div>
                
<div id="contenido_a_mostrar1">
    <h2>Acerca de nuestros proyectos2</h2>
</div>
                
<div id="contenido_a_mostrar2">
    <h2>Acerca de nuestros proyectos3</h2>
</div>
                </div>
 

[oNefl0w189]

Iniciado por Snoopy1413

el.style.display = (el.style.display == 'none') ? 'block' : 'none'; Esto da NULL intenta hacerlo de otra forma =)

Que? no entiendo, si funcionar.. funciona, el caso es que no me muestra la tercera si no tengo abierta la primera :S, tengo que hacer que no dependa una de otra (que realmente no entiendo porque depende =S).

si cambio algo, por ejemplo el.style.display = 'none' entonces no funciona..

[IsaBelM]

no es null. el código ha de funcionar con 2, 3, 4, n

[Snoopy1413]

Iniciado por IsaBelM

no es null. el código ha de funcionar con 2, 3, 4, n

depuralo con chrome para que veas =)

[oNefl0w189]

Bueno chicos, independientemente de que de Null o no, la cosa es que funciona, y si funciona es que hace lo que debería hacer.

El problema esta en que no me muestra el 2º info si no abro el 1º antes.. y los divs no estan anidados unos con otros :S, que puede ser?

Otra cosa curiosa tambien es que si abro primero el 2º y despues abro el 1º el segundo tambien esta abierto, asique funciona bien.. pero, ¿Porque no lo muestra?

PD: la podeis probar en www.estoengancha.webuda.com que lo acabo de subir.

[IsaBelM]

como que no los tienes anidados??

<div class="marg_top2 wrapper" id="contenido_a_mostrar" style="display: block; ">
<div class="box1_out">
<div class="box1">
<h2><cufon class="cufon cufon-canvas" alt="Acerca " style="width: 78px; height: 26px; "><canvas width="101" height="30" style="width: 101px; height: 30px; top: -3px; left: -1px; "></canvas><cufontext>Acerca </cufontext></cufon><cufon class="cufon cufon-canvas" alt="de " style="width: 34px; height: 26px; "><canvas width="56" height="30" style="width: 56px; height: 30px; top: -3px; left: -1px; "></canvas><cufontext>de </cufontext></cufon><cufon class="cufon cufon-canvas" alt="nuestros " style="width: 98px; height: 26px; "><canvas width="120" height="30" style="width: 120px; height: 30px; top: -3px; left: -1px; "></canvas><cufontext>nuestros </cufontext></cufon><cufon class="cufon cufon-canvas" alt="proyectos" style="width: 106px; height: 26px; "><canvas width="124" height="30" style="width: 124px; height: 30px; top: -3px; left: -1px; "></canvas><cufontext>proyectos</cufontext></cufon></h2>
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus.</p>
</div>
</div>

<div class="marg_top2 wrapper" id="contenido_a_mostrar1" style="display: block; ">
<div class="box1_out">
<div class="box1">
<h2><cufon class="cufon cufon-canvas" alt="Acerca " style="width: 78px; height: 26px; "><canvas width="101" height="30" style="width: 101px; height: 30px; top: -3px; left: -1px; "></canvas><cufontext>Acerca </cufontext></cufon><cufon class="cufon cufon-canvas" alt="de " style="width: 34px; height: 26px; "><canvas width="56" height="30" style="width: 56px; height: 30px; top: -3px; left: -1px; "></canvas><cufontext>de </cufontext></cufon><cufon class="cufon cufon-canvas" alt="nuestros " style="width: 98px; height: 26px; "><canvas width="120" height="30" style="width: 120px; height: 30px; top: -3px; left: -1px; "></canvas><cufontext>nuestros </cufontext></cufon><cufon class="cufon cufon-canvas" alt="proyectos2" style="width: 119px; height: 26px; "><canvas width="134" height="30" style="width: 134px; height: 30px; top: -3px; left: -1px; "></canvas><cufontext>proyectos2</cufontext></cufon></h2>
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus.</p>
</div>
</div>

<div class="marg_top2 wrapper" id="contenido_a_mostrar2" style="display: none; ">
<div class="box1_out">
<div class="box1">
<h2><cufon class="cufon cufon-canvas" alt="Acerca " style="width: 78px; height: 26px; "><canvas width="101" height="30" style="width: 101px; height: 30px; top: -3px; left: -1px; "></canvas><cufontext>Acerca </cufontext></cufon><cufon class="cufon cufon-canvas" alt="de " style="width: 34px; height: 26px; "><canvas width="56" height="30" style="width: 56px; height: 30px; top: -3px; left: -1px; "></canvas><cufontext>de </cufontext></cufon><cufon class="cufon cufon-canvas" alt="nuestros " style="width: 98px; height: 26px; "><canvas width="120" height="30" style="width: 120px; height: 30px; top: -3px; left: -1px; "></canvas><cufontext>nuestros </cufontext></cufon><cufon class="cufon cufon-canvas" alt="proyectos3" style="width: 119px; height: 26px; "><canvas width="134" height="30" style="width: 134px; height: 30px; top: -3px; left: -1px; "></canvas><cufontext>proyectos3</cufontext></cufon></h2>
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus.</p>
</div>
</div>
</div>
</div>
</div>