Why is the class - .menu-hidden not being removed when i click the Show more button-CodePudding

Here is the html

<ul class="menu__box d-flex flex-column " id="menu-ul">
        <div class="menu-title-container d-flex align-items-center justify-content-center">
      <p class="menu-title">Most Popular</p>
      </div>
      
            <li><a class="menu__item" href="#">Batteries</a></li>
            <li><a class="menu__item" href="#">Engine Oil</a></li>
            <li><a class="menu__item" href="#">Spark Plugs</a></li>
            <li><a class="menu__item" href="#">Tyres</a></li>
            <li><a class="menu__item menu-hidden" href="#">ATF</a></li>
            <li><a class="menu__item menu-hidden" href="#">Rims</a></li>
            <li><a class="menu__item menu-hidden" href="#">MOBIS Hyundai</a></li>
            <li class="menu-btn-expand"><a class="menu__item" href="#" id="showMore">Show More</a></li>
            
            <div class="menu-title-container d-flex align-items-center justify-content-center">
            <p class="menu-title">Shop Deals</p>
            </div>
            
            <li><a class="menu__item" href="#">Top Deals</a></li>
            
            <div class="menu-title-container d-flex align-items-center justify-content-center">
            <p class="menu-title">Shop By</p>
            </div>
            
            <li><a class="menu__item" href="#">By Make</a></li>
            <li><a class="menu__item" href="#">By Model</a></li>
            
            <div class="menu-title-container d-flex align-items-center justify-content-center">
            <p class="menu-title">Trustworthy Advice</p>
            </div>
              <li><a class="menu__item" href="#">Advice & How to's</a></li>
             <li><a class="menu__item" href="#">Find Us</a></li>
             <div class="menu-title-container d-flex align-items-center justify-content-center">
            <p class="menu-title">Contact Us</p>
            </div>
              <li><a class="menu__item" href="#">Contact</a></li>   

    </ul>
    
  </div>
     
        </div>

Here is the CSS

#menu__toggle {
  opacity: 0;
}

#menu__toggle:checked ~ .menu__btn > span {
  transform: rotate(45deg);
}
#menu__toggle:checked ~ .menu__btn > span::before {
  top: 0;
  transform: rotate(0);
}
#menu__toggle:checked ~ .menu__btn > span::after {
  top: 0;
  transform: rotate(90deg);
}
#menu__toggle:checked ~ .menu__box {
  visibility: visible;
  left: 0;
}

.menu__btn {
  display: flex;
  align-items: center;
  position: relative;
  top: -1rem;
  left: 3rem;
  width: 26px;
  height: 26px;
  cursor: pointer;
  z-index: 1;
}

.menu__btn > span,
.menu__btn > span::before,
.menu__btn > span::after {
  display: block;
  position: absolute;

  width: 100%;
  height: 5px;

  background-color: #616161;

  transition-duration: 0.25s;
}
.menu__btn > span::before {
  content: "";
  top: -8px;
}
.menu__btn > span::after {
  content: "";
  top: 8px;
}

.menu__box {
  display: block;
  position: fixed;
  visibility: hidden;
  left: -100%;
  width: 300px;
  height: 70%;
  margin: 0;
  padding: 1rem 0;
  list-style: none;
  background-color: #fff;
  box-shadow: 1px 0px 6px rgba(0, 0, 0, 0.2);
  border-right: 1px solid black;
  border-top: 1px solid black;
  overflow: auto !important;
  transition-duration: 0.25s;
}

.menu__box li a {
  font-size: 0.8rem;
  font-family: "Poppins";
}

.menu__item {
  display: block;
  padding: 12px 24px;

  color: #333;

  font-family: "Roboto", sans-serif;
  font-size: 20px;
  font-weight: 600;

  text-decoration: none;
  border-top: none;

  transition-duration: 0.25s;
}
.menu__item:hover {
  background-color: #f5f5f5;
}

.menu-line-break {
  background-color: #f5f5f5;
  width: 3rem;
  height: 0.2rem;
  margin: 0.5rem auto;
}

.menu-btn-expand {
  text-decoration: underline;
}

.menu-title-container {
  width: 100%;
}

.menu-hidden {
  display: none;
}

The Javascript

let showMore = document.querySelector('#showMore');

showMore.addEventListener('click' , () => {
  let hiddenLi = document.querySelectorAll('.menu__item');

  hiddenLi.classList.remove("menu-hidden")
})

The initial li with the class of menu-hidden is put on display none . However , when i am removing the class as seen in my code the li still do not show. What's the solution , I appreciate the help . I am kind of new to this so I might be making a silly mistake i do not know.

CodePudding user response：

The class stays because document.querySelectorAll('.menu__item'); gets every element with that class. So you need to remove the class from each element, which can be done with a for-loop.

let showMore = document.querySelector('#showMore');

showMore.addEventListener('click' , () => {
  let hiddenLi = document.querySelectorAll('.menu__item');
  
  for (var i = 0; i < hiddenLi.length; i  ) {
    hiddenLi[i].classList.remove("menu-hidden")
  }
})

.menu-hidden {
  display: none;
}

li {
  list-style-type: none;
}

<ul>
  <li><a class="menu__item" href="#">Spark Plugs</a></li>
  <li><a class="menu__item menu-hidden" href="#">MOBIS Hyundai</a></li>
  <li><a class="menu__item menu-hidden" href="#">Rims</a></li>
  <li><a class="menu__item menu-hidden" href="#">ATF</a></li>
  <li class="menu-btn-expand"><a class="menu__item" href="#" id="showMore">Show More</a></li>
</ul>

CodePudding user response：

hiddenLi is actually a collection. You should run through each element of the collection.

let showMore = document.querySelector('#showMore');

showMore.addEventListener('click' , () => {
  let hiddenLi = document.querySelectorAll('.menu__item');  
  hiddenLi.forEach(each => each.classList.remove("menu-hidden"))
})

#menu__toggle {
  opacity: 0;
}

#menu__toggle:checked ~ .menu__btn > span {
  transform: rotate(45deg);
}
#menu__toggle:checked ~ .menu__btn > span::before {
  top: 0;
  transform: rotate(0);
}
#menu__toggle:checked ~ .menu__btn > span::after {
  top: 0;
  transform: rotate(90deg);
}
#menu__toggle:checked ~ .menu__box {
  visibility: visible;
  left: 0;
}

.menu__btn {
  display: flex;
  align-items: center;
  position: relative;
  top: -1rem;
  left: 3rem;
  width: 26px;
  height: 26px;
  cursor: pointer;
  z-index: 1;
}

.menu__btn > span,
.menu__btn > span::before,
.menu__btn > span::after {
  display: block;
  position: absolute;

  width: 100%;
  height: 5px;

  background-color: #616161;

  transition-duration: 0.25s;
}
.menu__btn > span::before {
  content: "";
  top: -8px;
}
.menu__btn > span::after {
  content: "";
  top: 8px;
}

.menu__box {
  display: block;
/*
  position: fixed;
  visibility: hidden;
 */ 
  left: -100%;
  width: 300px;
  height: 70%;
  margin: 0;
  padding: 1rem 0;
  list-style: none;
  background-color: #fff;
  box-shadow: 1px 0px 6px rgba(0, 0, 0, 0.2);
  border-right: 1px solid black;
  border-top: 1px solid black;
  overflow: auto !important;
  transition-duration: 0.25s;
}

.menu__box li a {
  font-size: 0.8rem;
  font-family: "Poppins";
}

.menu__item {
  display: block;
  padding: 12px 24px;

  color: #333;

  font-family: "Roboto", sans-serif;
  font-size: 20px;
  font-weight: 600;

  text-decoration: none;
  border-top: none;

  transition-duration: 0.25s;
}
.menu__item:hover {
  background-color: #f5f5f5;
}

.menu-line-break {
  background-color: #f5f5f5;
  width: 3rem;
  height: 0.2rem;
  margin: 0.5rem auto;
}

.menu-btn-expand {
  text-decoration: underline;
}

.menu-title-container {
  width: 100%;
}

.menu-hidden {
  display: none;
}

<ul class="menu__box d-flex flex-column " id="menu-ul">
        <div class="menu-title-container d-flex align-items-center justify-content-center">
      <p class="menu-title">Most Popular</p>
      </div>
      
            <li><a class="menu__item" href="#">Batteries</a></li>
            <li><a class="menu__item" href="#">Engine Oil</a></li>
            <li><a class="menu__item" href="#">Spark Plugs</a></li>
            <li><a class="menu__item" href="#">Tyres</a></li>
            <li><a class="menu__item menu-hidden" href="#">ATF</a></li>
            <li><a class="menu__item menu-hidden" href="#">Rims</a></li>
            <li><a class="menu__item menu-hidden" href="#">MOBIS Hyundai</a></li>
            <li class="menu-btn-expand"><a class="menu__item" href="#" id="showMore">Show More</a></li>
            
            <div class="menu-title-container d-flex align-items-center justify-content-center">
            <p class="menu-title">Shop Deals</p>
            </div>
            
            <li><a class="menu__item" href="#">Top Deals</a></li>
            
            <div class="menu-title-container d-flex align-items-center justify-content-center">
            <p class="menu-title">Shop By</p>
            </div>
            
            <li><a class="menu__item" href="#">By Make</a></li>
            <li><a class="menu__item" href="#">By Model</a></li>
            
            <div class="menu-title-container d-flex align-items-center justify-content-center">
            <p class="menu-title">Trustworthy Advice</p>
            </div>
              <li><a class="menu__item" href="#">Advice & How to's</a></li>
             <li><a class="menu__item" href="#">Find Us</a></li>
             <div class="menu-title-container d-flex align-items-center justify-content-center">
            <p class="menu-title">Contact Us</p>
            </div>
              <li><a class="menu__item" href="#">Contact</a></li>   

    </ul>