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>