How to remove one class after it has been toggled

Question

I'm trying to figure out how to make my navbar open again, without refreshing the page, after it has already been opened and automatically closed. The original state of the ul tag is.bubbles, when clicked for the first the the class bubbles-active is toggled, and when one of the links is clicked bubbles-passive is toggled, but not removed- meaning my ul tag has both classes toggled (bubbles-passive and bubbles-active).

I reckon thats the bug, but I'm failing at figuring out how to make the code work. Should I make the bubbles-passive class remove itself after it's been called, and if so, how do I make that happen?

HTML

<nav class="navbar" id="navbar"> 
            <ul class="bubbles">
                <li>
                    <a href="#myoffers" id="offers-link" class="offersp" > 01. My offers</a>
                </li>
                <li>
                    <a href="#work" id="work-link" class="workp"> 02. My work</a>
                </li>
                <li>
                    <a href="./schedule.html" id="contact-link" > 03. Contact me</a>
                </li>
                <li>
                    <a href="./hire.html" id="hire-link"> 04. Hire me</a>
                </li>
            </ul>
            <div class="burger">
                <div class="line"></div>
                <div class="line1"></div>
                <div class="line2"></div>
            </div>
        </nav>  

CSS

.bubbles{
    display: block;
    z-index: 5;
    background: linear-gradient(to right, #a239ca, #4717f6);
    position: absolute;
    right: 0px;
    top: 35px;
    height: 500px;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    text-align: center;
    transform: translateX(100%);
    transition: transform 0.5s ease-in;
}

.bubbles-active{
    transform: translateX(0%);
}

.bubbles-passive{
    transform: translateX(100%);
}

@keyframes bubblesFade{
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to{
        opacity: 1;
        transform: translateX(0px);
    }
}

.bubbles li{
    list-style: none;
    opacity: 0;
}

.burger div{
    width: 25px;
    height: 3px;
    background-color: #e7dfdd;
    margin: 5px;
    transition: all 0.5s ease;
}

.burger{
    position: absolute;
    right: 0px;
    margin: 10px;
    display: block;
    cursor: pointer;
}

.toggle .line{
    transform: rotate(-45deg) translate(-5px,6px);
}

.toggle .line1{
    opacity: 0;
}

.toggle .line2{
    transform: rotate(45deg) translate(-5px,-6px);
}

.reset .line{
    transform: rotate(0deg) translate(0px, 0px);
}

.reset .line1{
    opacity: 1;
}

.reset .line2{
    transform: rotate(0deg) translate(0px, 0px);
}

JavaScript

const navSlide = () => {
  const burger = document.querySelector('.burger');
  const nav = document.querySelector('.bubbles');
  const bubbles = document.querySelectorAll('.bubbles li');
  const offers = document.querySelector('.offersp');
    const work = document.querySelector('.workp');

  burger.addEventListener('click', () => {
    nav.classList.toggle('bubbles-active');

    bubbles.forEach((link, index) => {
      if(link.style.animation){
        link.style.animation = ''
      } else {
        link.style.animation = `bubblesFade 0.5s ease forwards ${index / 7 + 0.3}s`;
      console.log(index / 7);
      }
    });

    burger.classList.toggle('toggle');
  });

  offers.addEventListener('click', () => {
    nav.classList.toggle('bubbles-passive');

    burger.classList.toggle('reset');
});

work.addEventListener('click', () => {
    nav.classList.toggle('bubbles-passive');

    burger.classList.toggle('reset');
});

}

navSlide();

Here's a codepen of the problem https://codepen.io/jelaaxo/pen/JjGQMPM

Answer 1

I have few suggestion. Use id for selecting to elements instead of classes. You can use for id for ul .

<ul id="navUl" class="bubbles">

Then select is using this.

const nav = document.getElementById(navUl);

Then you have to check bubbles-active is exist in class list.

    if (nav.classList.contains("bubbles-active")) {
      nav.classList.remove("bubbles-active");
      nav.classList.add("bubbles-passive");
    } else {
      nav.classList.add("bubbles-active");
    }

I hope this will help you to solve your problem.