Skip to content
Advertisement

Javascript classList.add to element with 0px height

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>
Advertisement