[SOLUCIONADO] Problema con evento: tengo que dar 2 clic para que funcione!

[berkeleyPunk]

Hola, hola!

Tengo un pequeño script que hace que cuando le das clic a un div A, aparece un div A-bis. Y cuando le das clic a un div B, aparece un div B-bis y se esconde el div A-bis.

La cosa funciona bien la primera vez que das clic en los div A y B. Pero si vuelves a dar clic en A ó B, la cosa ya no funciona con un solo clic, hay que dar otro.

Ver script aquí.

¿Por qué?

Saludos!

[Italico76]

berkeleyPunk: amigo sin el codigo dificil ayudarte (colocalo por favor)


EDIT: no vi tu enlace.... no me los muestra mi personalizacion del browser

[quimfv]

Te complicas mucho la vida no???

Código Javascript:

function mostrar_ocultar(ID){
var divs = Array("div1","div2");
var IDa=ID;
var IDb="";
if(divs[0]==ID){
   IDb=divs[1];
}else{
   IDb=divs[0];
}
if(document.getElementById(IDa+"b").style.display==""){
     document.getElementById(IDa+"b").style.display="none";
}else{
     document.getElementById(IDa+"b").style.display="";
}
    document.getElementById(IDb+"b").style.display="none";
}
 

Código HTML:

<div id="div1" onclick='mostrar_ocultar(this.id)' style="clear:both">
                Click aquí 1
        </div>
        <div id="div1b" style="display:none">
            Lorem ipsum ad his scripta blandit partiendo, eum fastidii accumsan euripidis in, eum liber hendrerit an. Qui ut wisi vocibus suscipiantur, quo dicit ridens inciderint id. Quo mundi lobortis reformidans eu, legimus senserit definiebas an eos.
        </div>
 
<!-- ............................. -->
 
        <div id="div2" onclick="mostrar_ocultar(this.id)" style="clear:both">
                Click aquí 2
        </div>
        <div id="div2b" style="display:none">
            Lorem ipsum ad his scripta blandit partiendo, eum fastidii accumsan euripidis in, eum liber hendrerit an. Qui ut wisi vocibus suscipiantur, quo dicit ridens inciderint id. Quo mundi lobortis reformidans eu, legimus senserit definiebas an eos.
        </div>
 

Mi ejemplo lo hace cambiando el style, pero lo podrias hacer cambiando el class (usando un visible y otro no visible)

[Italico76]

Ya... y con respetando las "transiciones" que con display:none no se respetan:

http://jsfiddle.net/boctulus/gg3Az/2/

Código Javascript:

<style>
.testWrapper {
    width: 400px;
    height: auto;
    background: #272727;
    overflow: visible;
    padding: 50px;
    color: white;
}
.div_1b_y2b {
    position: relative;
    left: 10.3%;
    width: 79%; 
    border: 1px solid white;
    overflow: hidden;
    -webkit-transition: all ease 1s;
}
 
#div1b,#div2b {height: 0px;}
 
</style>
 
<div class="testWrapper">
 
        <div id="div1a" onclick="toogle(this,'div2a');">
            <div>
                Click aquí 1
            </div>
        </div>
        
        <div id="div1b" class="div_1b_y2b">
            Lorem ipsum ad his scripta blandit partiendo, eum fastidii accumsan euripidis in, eum liber hendrerit an. Qui ut wisi vocibus suscipiantur, quo dicit ridens inciderint id. Quo mundi lobortis reformidans eu, legimus senserit definiebas an eos.
        </div>
 
<!-- ............................. -->
 
        <div id="div2a" onclick="toogle(this,'div1a');">
            <div>
                Click aquí 2
            </div>
        </div>
        
        <div id="div2b" class="div_1b_y2b">
            Lorem ipsum ad his scripta blandit partiendo, eum fastidii accumsan euripidis in, eum liber hendrerit an. Qui ut wisi vocibus suscipiantur, quo dicit ridens inciderint id. Quo mundi lobortis reformidans eu, legimus senserit definiebas an eos.
        </div>
 
    </div>
 
<script type="text/javascript">
 
    function toogle(me,other)
    {       
        other   = document.getElementById(other.replace(/a/, "b"));
        me      = document.getElementById(me.id.replace(/a/, "b"));
                        
        if (me.clientHeight==0 && other.clientHeight==0){
            me.setAttribute("style","height: 160px");
        }else{  
            me.setAttribute("style","height: 160px");
            other.setAttribute("style","height: 0px");      
        }
 
    }
 
</script>
 

HISTORIAL DE CAMBIOS (que me acuerde)


- Se rehizo el JS acomodandose a los "estandares" de hacer una funcion llamada toogle()

- Se agrego a los CSS: #div1b,#div2b {height: 0px;}

- Se cambio el onclick concistentemente con la nueva funcion en JS


Seguramente llegaran a decirme que DEBO registrar el evento onclick en vez de usar onclick inline y tienen razon! solo que como es un caso tan particular de toogle() y el HTML ya venia con un onclick inline... pues lo deje asi

[Alexis88]

Otra alternativa de solución:

Código Javascript:

var divs = document.querySelectorAll(".div_1b_y2b"),
    buttons = document.querySelectorAll(".disparador");
Array.prototype.forEach.call(buttons, function(button){
    button.addEventListener("click", function(){
        Array.prototype.forEach.call(divs, function(div){
            var numDiv = div.id.substr(div.id.length - 2, 1),
                numBut = button.id.substr(button.id.length - 2, 1),
                altura = div.style.height || "0px";
            if (numDiv == numBut) div.style.height = altura != "0px" ? "0px" : "100px";
            else div.style.height = "0px";
        });    
    }, false);
});
 

Asigno una clase a los <div> en los que se darán los clics, los tomo junto con los <div> que se mostrarán/ocultarán y a cada <div> que clickearé, le asigno una función cuando se produzca el evento click. Cuando esto suceda, recorro al conjunto de elementos <div> a mostrar/ocultar y obtengo el número que se encuentra en su id una posición antes del final y lo mismo hago con el <div> disparador. Además, obtengo la altura del <div> a mostrar/ocultar o le asigno el valor "0px" si es que no se le ha definido dicho valor. Si los números obtenidos de los id de los elementos en cuestión son iguales, realizo otra condición; si la altura es distinta a "0px", lo cual quiere decir que ya es visible, le asigno el valor "0px" como altura, ocultándolo, caso contrario, le asigno "100px" de altura, mostrándolo. Si los números son diferentes, le asigno el valor "0px", ocultándolo.



Saludos

[Italico76]

Excelente generalizacion

[berkeleyPunk]

Uh, caray, bien hecho, señores.

Como dice italico76, el script de quimfv resultó no jalar las transiciones. Además, si no veo mal, el código se haría inmanejable en caso que hubieran múltiples divs a mostrar (aunque, ciertamente, éste no era el problema y yo tenía el código inicialmente así).

Los scripts de italico76 y alexis88, bien, no, bien no, excelente .

Me despido y feliz mundial Brasil 2014 !
(Yo le voy a cualquier país americano, -excepto México , por ejemplo Costa Rica, que va muy bien.)


Saludos!