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.
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>This is because even if your element .bio.hidden has an opacity of 0, it messes up with the click event, and it overflows over the other div.
Try putting display: none if you want to hide an element