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

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 >
  <div ><a href="#">LOGO</a></div>
  
  <div >
    <ul>
      <li >
        <a href="#" >Beallitasok</a>
        
        <div >
          <ul>
            <li><a href="#" >Beallitas1</a></li>
            <li><a href="#" >Beallitas2</a></li>
            <li><a href="#" >Beallitas3</a></li>
          </ul>
        </div>
      </li>
      
      <li >
        <a href="#">Lehetosegek</a>
      </li>
      
      <li >
        <a href="#">Tobbet</a>
      </li>
    </ul>
  </div>
</nav>

CodePudding user response：

The active class is added to the link box. please use the below code.

.link-box.active {
    visibility: visible;}

Working example:

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;
}

.link-box.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 >
  <div ><a href="#">LOGO</a></div>
  
  <div >
    <ul>
      <li >
        <a href="#" >Beallitasok</a>
        
        <div >
          <ul>
            <li><a href="#" >Beallitas1</a></li>
            <li><a href="#" >Beallitas2</a></li>
            <li><a href="#" >Beallitas3</a></li>
          </ul>
        </div>
      </li>
      
      <li >
        <a href="#">Lehetosegek</a>
      </li>
      
      <li >
        <a href="#">Tobbet</a>
      </li>
    </ul>
  </div>
</nav>

CodePudding user response：

It's a CSS error. the classname visibility doesn't exist anywhere.

CodePudding user response：

For making it work you only need to change the .visibility class to .link-box on the last CSS rule

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;
}

.link-box.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 >
  <div ><a href="#">LOGO</a></div>
  
  <div >
    <ul>
      <li >
        <a href="#" >Beallitasok</a>
        
        <div >
          <ul>
            <li><a href="#" >Beallitas1</a></li>
            <li><a href="#" >Beallitas2</a></li>
            <li><a href="#" >Beallitas3</a></li>
          </ul>
        </div>
      </li>
      
      <li >
        <a href="#">Lehetosegek</a>
      </li>
      
      <li >
        <a href="#">Tobbet</a>
      </li>
    </ul>
  </div>
</nav>