2

Estoy intentando que el botón pueda abrir y cerrar el div que le pertenece en caso de no dar click en otro botón ya que cualquier botón que le sigue pueden cerrar el div abierto para mostrar el contenido del div activado.

Pero al intentar cerrar el div con el botón el cual lo llama funciona solo una vez ya despues deja funcionar e incluso bloquea la vista de los otros si ya han sido mostrados.

function cajaOpen(cajaName) {

let caja_content = document.querySelectorAll(".caja-content");

for (let i = 0; i < caja_content.length; i++) {

caja_content[i].style.display = "none";

}


document.getElementById(cajaName).style.display = "block";


if (document.getElementById(cajaName).style.display == "block") {

let button = document.querySelectorAll(".caja > button");

button[cajaName - 1].onclick = function() {

document.getElementById(cajaName).style.display = "none";

}


}



}
<div class="caja-1-content caja">

<button onclick="cajaOpen('1')">Abrir caja 1</button>

<div id="1" class="caja-content caja-1" style="display: none;">

<h2>Hola</h2>

</div>

</div>


<div class="caja-2-content caja">

<button onclick="cajaOpen('2')">Abrir caja 2</button>

<div id="2" class="caja-content caja-2" style="display: none;">

<h2>Cómo estás</h2>

</div>

</div>


<div class="caja-3-content caja">

<button onclick="cajaOpen('3')">Abrir caja 3</button>

<div id="3" class="caja-content caja-3" style="display: none;">

<h2>Adiós</h2>

</div>

</div>

2
  • El error radica en que recorres tus elementos cuando estos tienen el display:none, dicho bucle solo es ejecutado una vez, por ende no actualiza u obtiene el nuevo estado del display, te conviene mejor escuchar el evento y detectar el cambio al hacer click. el 26 sep. 2022 a las 21:15
  • te he dejado una respuesta aqui: ToGGle puedes evaluarla al igual que las otras respuesta; y segun la mejor se adapte a tu necesidad marcala como respuesta, saludos.
    – user46896
    el 26 sep. 2022 a las 21:51

3 respuestas 3

3

Intenta primero esconder los elementos que no son el que quieres mostrar/ocultar y después ver si está oculto lo muestras, y viceversa

function cajaOpen(cajaName) {
    let caja_content = document.querySelectorAll(".caja-content");
    for (let i = 0; i < caja_content.length; i++) {
        if (caja_content[i].id != cajaName) {
            caja_content[i].style.display = "none";
        }
    }
    if (document.getElementById(cajaName).style.display == "block") {
        document.getElementById(cajaName).style.display = "none";
    }
    else {
        document.getElementById(cajaName).style.display = "block";
    }
}
2

Tu problema está en que estás sobreescribiendo la funcion onclick y por eso solo se te ejecuta una vez. Puedes usar la misma función y con esa determinar si actualmente esta visible o no para saber si lo ocultas o lo muestras.

function cajaOpen(cajaName) {
    
    let contenidos = document.querySelectorAll(".caja-content");
    //Ocultas todos los contenidos menos el que seleccionaste
    for (let i = 0; i < contenidos.length; i++) {
        if (contenidos[i].id != cajaName) {
            contenidos[i].style.display = "none";
        }
    }

    const contenido = document.getElementById(cajaName); //Capturas el contenido con el que quieres trabajar
    const estaVisible = contenido.style.display == "block"; //verificas si está visible
    contenido.style.display = estaVisible ? "none" : "block"; //Aqui lo muestras/ocultas segun el estado actual
}
<div class="caja-1-content caja">
  <button onclick="cajaOpen('1')">Abrir caja 1</button>
  <div id="1" class="caja-content caja-1" style="display: none;">
    <h2>Hola</h2>
  </div>
</div>
<div class="caja-2-content caja">
  <button onclick="cajaOpen('2')">Abrir caja 2</button>
  <div id="2" class="caja-content caja-2" style="display: none;">
    <h2>Cómo estás</h2>
  </div>
</div>
<div class="caja-3-content caja">
  <button onclick="cajaOpen('3')">Abrir caja 3</button>
  <div id="3" class="caja-content caja-3" style="display: none;">
    <h2>Adiós</h2>
  </div>
</div>

1

Debes esconder los elementos que no son el que quieres mostrar/ocultar y después ver si está oculto lo muestras, y viceversa; yo al contrario que tu prefiero usar Object.entries para navegar por los elementos y Operadores Ternarios para el toggle visual.

Object.entries: tomara el objeto del resultado del querySelectorAll y sus entradas las devolbera como elementos de un array.

Operadores Ternarios: permiten evaluar true/false una condicion en una sola linea.

function cajaOpen(cajaName) {
    let caja_content = document.querySelectorAll(".caja-content");
    
    for (let [key,element] of Object.entries(caja_content)) {
      if(element.id != cajaName){
        element.style.display = "none";
      }
    }
    
    let cajaAct = document.getElementById(cajaName);
    
    cajaAct.style.display = (cajaAct.style.display === 'none') ? '' : 'none';
    
}
<div class="caja-1-content caja">
  <button onclick="cajaOpen('1')">Abrir caja 1</button>
  <div id="1" class="caja-content caja-1" style="display: none;">
    <h2>Hola</h2>
  </div>
</div>
<div class="caja-2-content caja">
  <button onclick="cajaOpen('2')">Abrir caja 2</button>
  <div id="2" class="caja-content caja-2" style="display: none;">
    <h2>Cómo estás</h2>
  </div>
</div>
<div class="caja-3-content caja">
  <button onclick="cajaOpen('3')">Abrir caja 3</button>
  <div id="3" class="caja-content caja-3" style="display: none;">
    <h2>Adiós</h2>
  </div>
</div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.