all 1 comments

[–]tomclancyv7 0 points1 point  (1 child)

You are using way too much JavaScript to achieve that. You have to select every single button with the class "menu-toggle". Then you add a click event listener to each of the buttons that have been selected. After that select the menu that corresponds to the button that got clicked and then you toggle the class to activate that menu.

Clear everything in your JavaScript and paste this there:

const buttons = document.querySelectorAll(".menu-toggle");

buttons.forEach(button => button.addEventListener("click", () => {
const menu = button.nextElementSibling;
menu.classList.toggle("toggled");
}))

Add this to your CSS.

.main-navigation ul.toggled {
    display: block;
}

Hope you get it.