Home Why is my CSS visibility change not working, when I toggle class with JavaScript?

Questions

Why is my CSS visibility change not working, when I toggle class with JavaScript?

June 15, 2022

Started practicing some HTML, CSS, JavaScript. I made a simple navbar, wanted to make a dropdown panel if clicked on "Beallitasok (Settings)". I did a toggle in js, and saw that it adds a new class to the html just as I wanted. If my html class and css selector equals it should make my class from invisible to visible as far as I know. I don’t know why it’s not working

let button = document.querySelector('.button');
let linkBox = document.querySelector('.link-box');

button.addEventListener('click', () => {
  linkBox.classList.toggle('active');
})

* {
  margin: 0;
  padding: 0;
}

.navbar {
  height: 10vh;
  background-color: black;
  display: flex;
  align-items: center;
}

.logo a {
  text-decoration: none;
  color: white;
  font-size: 26px;
}

.logo {
  padding-left: 7vh;
}

.nav-options-box {
  margin-left: auto;
}

.nav-options-box ul {
  display: flex;
  list-style: none;
}

.nav-option a {
  margin: 0 3vh;
  color: white;
  text-decoration: none;
}

.dropdown {
  position: relative;
}

.link-box ul {
  top: calc(100% + 2rem);
  left: -3.6vh;
  width: 200px;
  height: 200px;
  background-color: rgb(255, 255, 255);
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  position: absolute;
  text-align: center;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, .4);
}

.link-box {
  visibility: hidden;
}

.link-box ul a {
  color: black;
}

.visibility.active {
  visibility: visible;
}

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&family=Poppins:ital,wght@0,500;1,500&display=swap" rel="stylesheet">

<nav class="navbar">
  <div class="logo"><a href="#">LOGO</a></div>
  
  <div class="nav-options-box">
    <ul>
      <li class="nav-option dropdown">
        <a href="#" class="button">Beallitasok</a>
        
        <div class="link-box">
          <ul>
            <li><a href="#" class="nav-link">Beallitas1</a></li>
            <li><a href="#" class="nav-link">Beallitas2</a></li>
            <li><a href="#" class="nav-link">Beallitas3</a></li>
          </ul>
        </div>
      </li>
      
      <li class="nav-option">
        <a href="#">Lehetosegek</a>
      </li>
      
      <li class="nav-option">
        <a href="#">Tobbet</a>
      </li>
    </ul>
  </div>
</nav>