Tengo algunos divs en mi página que cuando se hace clic en un enlace necesitan alternar (mostrar / ocultar)

Js

var state = 'none';

function showhide(layer_ref) {
//alert(eval( "document.all." + layer_ref + ".style.display") == "none")

if (document.all) { //IS IE 4 or 5 (or 6 beta)
if(eval( "document.all." + layer_ref + ".style.display") == "none"){
eval( "document.all." + layer_ref + ".style.display = 'block'");
}else{
eval( "document.all." + layer_ref + ".style.display = 'none'");
}

}
if (document.layers) { //IS NETSCAPE 4 or below
if(document.layers[layer_ref].display == none){
document.layers[layer_ref].display = "block";
}else{
document.layers[layer_ref].display = "none";
}
}
if (document.getElementById &&!document.all) {
if(document.getElementById(layer_ref).style.display == "none"){
document.getElementById(layer_ref).style.display = "block";
}else{
document.getElementById(layer_ref).style.display = "none";
}
}
}

Html

     <div class="faq-row" style="z-index: 976;">
       <span class="itp-title"><a href="#" onclick="showhide('div1');">title</a></span>
        <div id="div1" style="display: none;">divcont</div>
     </div>
     <div class="faq-row" style="z-index: 976;">
       <span class="itp-title"><a href="#" onclick="showhide('div1');">title</a></span>
        <div id="div2" style="display: none;">divcont</div>
     </div>
     <div class="faq-row" style="z-index: 976;">
       <span class="itp-title"><a href="#" onclick="showhide('div1');">title</a></span>
        <div id="div3" style="display: none;">divcont</div>
     </div>

Mi problema es que no importa en qué enlace hago clic, solo alterna el primer div. ¿Alguien puede ver dónde estoy yendo mal? Gracias

1
Liam 27 jul. 2011 a las 17:34

7 respuestas

La mejor respuesta

Su primer problema es tratar de escribir JavaScript cruzado no trivial. Esto sería mucho, mucho más simple si usara algo como jQuery.

Dicho esto, su problema es que sus controladores onClick apuntan al mismo id.

onclick="showhide('div1');"

Cambie estos a los identificadores de div relevantes y debería estar bien.

Si usaste algo como jQuery, esta función sería irrelevante y podrías hacer algo como:

onclick="$('#div1').toggle()"
3
Matthew Scharley 27 jul. 2011 a las 13:38

Tiene showhide (div1) para cada uno de los eventos showhide ... que debería leer div2 y div3

EDITAR: también, otro show / hide puede ser este ...

function showhide(elementid){
obj=document.getElementById(elementid);
obj.style.display=(obj.style.display=='none')?(''):('none');    
}//both 
1
Adam MacDonald 27 jul. 2011 a las 13:36

Así es como lo hacemos en 2011;)

$('.itp-title').click(function(){
    $(this).next().toggle();
});

Demostración de trabajo: http://jsfiddle.net/AlienWebguy/rcr38/

Aprenda esto: http://jquery.com

0
AlienWebguy 27 jul. 2011 a las 13:38

Estás llamando a "showhide('div1');" en cada evento onclick. Intente cambiarlos a "showhide('div1');", "showhide('div2');" y "showhide('div3');".

0
Digital Plane 27 jul. 2011 a las 13:37

Debe llamar a showHide () con cada ID div. Aquí hay un ejemplo en vivo http://toggle-example.qip.li/edit/

0
soufell 27 jul. 2011 a las 13:41

Si tienes jQuery:

function showhide(element) {
    $(element).toggle();
}

Sería mucho más simple, por supuesto. ¿jQuery es una opción?

0
Chris Snowden 27 jul. 2011 a las 13:38

Siempre estás llamando a showhide('div1'). En cada clic de div

0
Semyazas 27 jul. 2011 a las 13:37