Kevin Powell - Community•2mo ago

Classlist toggle

hey guys, can anyone help me out on making this button toogle my nav list, and explain how it works, thanks https://codepen.io/Adhurim-Gashi/pen/NWZLRaO

7 Replies

Chris Bolson•2mo ago

I presume that you want to achieve this with JavaScript. If so, this can be achieved by adding an event listener to the button which, when clicked, toggles a class to display the nav menu. In a simple form this could be done with some JS code like this:

// select hamburger button
const toggleNavBtn = document.querySelector(".hamburger-btn");

// select nav element
const navEl = document.querySelector(".nav");

// toggle "show" class on button click
toggleNavBtn.addEventListener("click", () => {
  navEl.classList.toggle("show");
});

// select hamburger button
const toggleNavBtn = document.querySelector(".hamburger-btn");

// select nav element
const navEl = document.querySelector(".nav");

// toggle "show" class on button click
toggleNavBtn.addEventListener("click", () => {
  navEl.classList.toggle("show");
});

You then add the new "show" class to the CSS file. Again, based on your current CSS and in it's simples form, this could be this:

.show{
  display: block;
}

.show{
  display: block;
}

Finally, you will need to remove the <a> tag from within your button as this is not needed and will actually cause the page to reload rather than help display your nav. Here is my modified version of your code: https://codepen.io/cbolson/pen/VwJGKGz

Chris Bolson

CodePen

https://discord.com/channels/436251713830125568/1279076629099843644...

...

Jochem•2mo ago

it's also briefly covered in the CRL course that this layout is from

Chris Bolson•2mo ago

I would also add that you should probably add some accesibility items such as aria labels but for now lets keep it to the basics Ah, I didn' know that this was from a course. Sorry.

Jochem•2mo ago

no worries! It's a free course, and I don't think that button and functionality is directly from the course. There's just a section in day 20 I think where the mobile nav toggle is covered, but this isn't just for mobile just adding extra info, in case they want to see how Kevin solved it in the course

Chris Bolson•2mo ago

I should probably take a look at that course, just for reference so as to be able to help others better. I wouldn't want to be giving out advice contrary to what Kevin is teaching 😆 Just signed up. Let's see if I can learn something new. Unfortunately I can't access the corresponding section until 18th Sep. It seems that you are only allowed to take one lesson per day 😢

theboyduddus•2mo ago

thanks @Jochem for helping me despite our argument haha! @Chris Bolson thank you so much also @Chris one more question if i may the class that you added in my css "show" does it need to be anywhere in the html for the toggle to work or no this is the part that confuses me the most when i make a hamburger toogle button

Chris Bolson•2mo ago

No, it doesn't need to be in the HTML. It only needs to be defined in the style sheet. That is the whole point, the JavaScript ~~toggles it on and off~~ alternatively adds it and removes it from the element when the button is clicked. If you don't want (or can't) to add a new CSS class you could achieve the same by just adding or removing the style directly in the JavaScript code by toggling the "display":

let navDisplay = false; // hold current "visibility" of the nav element

// toggle hidden menu display state
toggleNavBtn.addEventListener("click", () => {
  if(navDisplay){
    // nav is currently visible - udpate navDisplay state and hide the nav
    navDisplay = false;
    navEl.style.display = "none";
  }else{
     // nav is currently hidden - udpate navDisplay state and show the nav
     navDisplay = true;
     navEl.style.display = "block";
  }
});

let navDisplay = false; // hold current "visibility" of the nav element

// toggle hidden menu display state
toggleNavBtn.addEventListener("click", () => {
  if(navDisplay){
    // nav is currently visible - udpate navDisplay state and hide the nav
    navDisplay = false;
    navEl.style.display = "none";
  }else{
     // nav is currently hidden - udpate navDisplay state and show the nav
     navDisplay = true;
     navEl.style.display = "block";
  }
});

This could then be reduced to something like this but I showed the extended version for clarity.

let navDisplay = false;
toggleNavBtn.addEventListener("click", () => {
  navDisplay = ! navDisplay;
  navEl.style.display = navDisplay ? "block" : "none";
});

let navDisplay = false;
toggleNavBtn.addEventListener("click", () => {
  navDisplay = ! navDisplay;
  navEl.style.display = navDisplay ? "block" : "none";
});

However, I would recommend going the CSS "show" way if possible as that way it will be easier to add a more interesting toggle than simply swapping the display from "block" to "none".

Gaming

Programming

Classlist toggle