Not sure if I’m missing something obvious here, but I’m trying to add a class to an element that has 0px
height to begin with.
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>
On click, the class .show
is added and the .hidden
class is removed. But it doesn’t work if the .hidden
class has 0px
assigned to it.
Advertisement
Answer
The problem is that if you put height 0 but do not set the overflow: hidden
the text content of that div will overflow and cover the clickable text, so the click event won’t be dispatched:
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>