No estoy seguro si me estoy perdiendo algo obvio aquí, pero estoy tratando de agregar una clase a un elemento que tiene una altura de 0px para empezar.
const teamMemberBioShow = function() { const bio = document.querySelector(".bio"); if (bio.classList.contains("hidden")) { bio.classList.remove("hidden"); bio.classList.add("show"); } else { bio.classList.remove("show"); bio.classList.add("hidden"); } } const teamMemberBioMore = document.querySelector(".bio-more"); teamMemberBioMore.addEventListener('click', teamMemberBioShow); .bio.hidden { opacity: 0; height: 0; } .bio.show { opacity: 1; height: auto; } <div class="bio hidden"> Bio goes here </div> <div class="bio-more">Read Bio</div> Al hacer clic, se agrega la clase .show y se elimina la clase .hidden . Pero no funciona si la clase .hidden tiene asignado 0px .
El problema es que si pone altura 0 pero no configura el overflow: hidden , el contenido de texto de ese div se desbordará y cubrirá el texto en el que se puede hacer clic, por lo que el evento de clic no se enviará:
const teamMemberBioShow = function() { const bio = document.querySelector(".bio"); if (bio.classList.contains("hidden")) { bio.classList.remove("hidden"); bio.classList.add("show"); } else { bio.classList.remove("show"); bio.classList.add("hidden"); } } const teamMemberBioMore = document.querySelector(".bio-more"); teamMemberBioMore.addEventListener('click', teamMemberBioShow); .bio.hidden { opacity: 0; height: 0; overflow: hidden; } .bio.show { opacity: 1; height: auto; } <div class="bio hidden"> Bio goes here </div> <div class="bio-more">Read Bio</div>Esto se debe a que incluso si su elemento .bio.hidden tiene una opacidad de 0, se confunde con el evento de clic y se desborda sobre el otro div.
Intenta poner display: none si quieres ocultar un elemento