[SOLUCIONADO] Problema inexplicable

[ichimokukoyomi]

Hola a todos. Estoy teniendo un problema que no logro entender por culpa de un script.
Espero que puedan ayudarme porque por más que busco y busco no encuentro nada que me explique el motivo por el que me ocurre.

Dispongo del siguiente código html:

Código:

<article class="char" onclick="abrir()" id="nombre">
                <img src="../Images/charf.jpg" alt="imagen" class="charimg" id="nombreimg"/>
                <div class="contenido" id="nombrecont">
                    <h2>Nombre apellidos</h2>
                    <h2 class="quote">"Quote"</h2>
                    <p>Aliquam in erat convallis lacus commodo pretium. Cras eros est, accumsan eget pulvinar a, finibus eu sapien. Phasellus dignissim, diam eu tincidunt maximus, dolor erat imperdiet felis, ut molestie ex tortor a risus. Sed congue, ex a suscipit maximus, sem lorem varius dui, at lacinia nisl sem non neque. Proin vel elit posuere, mattis magna id, sagittis neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla consequat est orci, quis placerat felis auctor non. Pellentesque egestas vitae leo et laoreet. Nunc id tellus velit. Etiam lacinia mollis metus id laoreet. Vestibulum id commodo ipsum. Etiam ut laoreet enim. Etiam et consequat nisi. Aenean finibus leo suscipit, commodo lectus sit amet, rhoncus arcu.</p>
                    <a href="#">Ver más...</a>
                    <br />
                    <span onclick="cerrar()">Cerrar</span>
                </div>
            </article>

Y utilizo los siguientes métodos en el script:

Código:

function abrir() {
    document.getElementById("nombre").style.width = "85%"; 
    document.getElementById("nombreimg").src = "../Images/fondo.png";
    document.getElementById("nombrecont").style.display = "block";
}
function cerrar() {
    document.getElementById("nombre").style.width = "13%";
    document.getElementById("nombreimg").src = "../Images/charf.jpg";
    document.getElementById("nombrecont").style.display = "none";
    
}

Se parte de que el estilo base que tienen es ".char{width:13%;}" y ".contenido{display:none;}


La cuestión es que la función "abrir()" funciona perfectamente.
Sin embargo, cuando le doy a la función de "cerrar()" no hace nada y no entiendo el motivo.
Es más, he probado a poner en la función "cerrar()" document.getElementById("nombrecont").style.displa y = "none";

[zerokilled]

buenas!

tu problema es por los eventos registrados en elementos jerarquicos. es decir, tienes dos listener iguales (onclick) en elementos donde hay una relacion de parentesco. debido a la propagacion de eventos, el primer listener (cerrar) captura el evento y luego el mismo evento es capturado por los proximos listener (abrir).

a modo de demostracion, si pones un alert en la funcion cerrar, veras que en efecto se "cierra" el contenido, pero tan pronto cierras el alert, nuevamente se abre el contenido.

hay varias soluciones. la mas facil de recordar y entender es reubicar el evento abrir en otro elemento que no sea un ancestro directo del elemento que tiene el evento cerrar. por ejemplo,en un SPAN seguido de la apertura de ARTICLE.

la otra solucion es detener la propagacion del evento al invocarse cerrar. basicamente invocas el evento con el argumento event. luego en la funcion invocas arguments[0].stopPropagation.

[ichimokukoyomi]

Con la primera opción ha funcionado perfectamente. Muchas gracias por la ayuda ^_^, aún soy muy nuevo en esto del javascript.

Intenté con la segunda solución que me ofreciste también, pero no me salió, así que opté por poner el evento "abrir()" en el img en lugar del article.