Creé un evento de clic que abre un div previamente 'oculto' y lo cierra nuevamente una vez que hace clic en el mismo botón.
Sin embargo, solo se ejecuta una vez (una abierta y otra cerrada). No puedo explicar por qué no funciona si hago clic nuevamente.
let readMore = document.getElementById('clickAbout'); let moreInfo = document.getElementById('about'); let changeSepa = document.getElementById('sepChange'); readMore.addEventListener('click', function(){ changeSepa.style.height = '2rem'; if (moreInfo.className == "") { moreInfo.className = "open"; moreInfo.style.display = 'block'; } else { moreInfo.style.display = 'none'; } });esto sucede porque está comprobando si className == "", pero está modificando className para que esté "abierto". En el segundo clic, verifica el nombre de clase que ahora está "abierto" y va al bloque else. En el tercer clic, espera que entre en el primer bloque, pero el nombre de clase todavía está "abierto".
Para una solución fácil, simplemente cambie el nombre de clase en el bloque else
else { moreInfo.className = ""; moreInfo.style.display = 'none'; } También le sugiero que utilice la propiedad classList en elementos https://developer.mozilla.org/en-US/docs/Web/API/Element/classList
usando la lista de clases podría verse así:
readMore.addEventListener("click", function () { changeSepa.style.height = "2rem"; if (moreInfo.className == "") { moreInfo.classList.add("open"); moreInfo.style.display = "block"; } else { moreInfo.classList.remove("open"); moreInfo.style.display = "none"; } });O incluso
readMore.addEventListener("click", function () { changeSepa.style.height = "2rem"; moreInfo.classList.toggle("open"); if (moreInfo.className == "") { moreInfo.style.display = "block"; } else { moreInfo.style.display = "none"; } });