CODEWITHSUNDEEP
javascripthtmlcss
fakermaker
fakermaker

Reputation: 167

How to hide navigation bar on link click?

I have 3 buttons and a responsive hamburger menu. Everything works as expected, but I can't think of a way to make a navigation bar go away as soon as I click on a button. The program is supposed to work like this: clicking hamburger menu activates 3 buttons, whenever user clicks on any of those 3 buttons it hides the buttons and only leaves the button that was clicked.

This is the wanted outcome:

This is my code so far.

html:

<div class="selectSection">
  <button type="button" data-number="1" class="active">1</button>
  <button type="button" data-number="2">2</button>
  <button type="button" data-number="3">3</button>
</div>

<div class="hamburger">
  <div class="line"></div>
  <div class="line"></div>
  <div class="line"></div>
</div>

<div>
  <div class="content" data-number="1">
    <p>1st page</p>
  </div>
  <div class="content" data-number="2">
    <p>2nd page</p>
  </div>
  <div class="content" data-number="3">
    <p>3rd page</p>
  </div>
</div>

css

.content:not(:first-child) {
  display: none;
}

.active {
  color: orange !important;
}

.hamburger {
  display: none;
}

@media all and (max-width: 800px) {
  .hamburger {
    display: inline-block;
    cursor: pointer;
    z-index: 7;
  }

  .hamburger .line {
    width: 30px;
    height: 3px;
    background: black;
    margin: 6px 0px;
  }

  .selectSection {
    display: none;
    overflow: hidden;
  }

  .selectSection.active {
    display: block;
  }
}

js

// change active class, show the clicked element only and hide the others

// grab all the buttons
let Buttons = document.querySelectorAll(".selectSection button");

// loop through the buttons using for..of
for (let button of Buttons) {
  // listen for a click event
  button.addEventListener("click", (e) => {
    // et = event target
    const et = e.target;
    // slect active class
    const active = document.querySelector(".active");
    // check for the button that has active class and remove it
    if (active) {
      active.classList.remove("active");
    }
    // add active class to the clicked element
    et.classList.add("active");

    // select all classes with the name content
    let allContent = document.querySelectorAll(".content");

    // loop through all content classes
    for (let content of allContent) {
      // display the content if the class has the same data-attribute as the button
      if (
        content.getAttribute("data-number") ===
        button.getAttribute("data-number")
      ) {
        content.style.display = "block";
      }
      // if it's not equal then hide it.
      else {
        content.style.display = "none";
      }
    }
  });
}

hamburger = document.querySelector(".hamburger");
hamburger.onclick = function () {
  navBar = document.querySelector(".selectSection");
  navBar.classList.toggle("activate");
};

This is the demo:

https://codepen.io/f4kermak3r/pen/ExRPKzJ

Upvotes: 0

Views: 1116

Answers (1)

Federico
Federico

Reputation: 29

you are using the wrong css class in your js file. At line 44, you must change navBar.classList.toggle("activate") to navBar.classList.toggle("active"). That should work.

Upvotes: 1

Related Questions