I am a bit new to coding. I have been working on a toggle tabs menu for a few days. I finally managed to create a toggle menu that allows the user to display different offers whenever they click on a button.

It worked absolutely fine yesterday. I decided to take an hour break from the screen and when I came back, the buttons functionality stopped working. The toggle function isnt working. When I click on a button, it does not display what it needs to display.

I have checked my CSS files and my index file, no changes there.

I am not sure what happened, as it was working perfectly fine before. I did not shut my computer down either. I have restarted etc and gone through my code, line by line... yet still, I am unable to find a problem.

FYI - I added some jquery to create a mobile drop down menu (i watched a tutorial). The jquery is added in the head section. The actual toggle menu is NOT made with jquery. Could it be an issue of overriding? I doubt it, as I mentioned that both were working fine yesterday.

Thank you so much for the help in advance!

This is where I have added the script tag:

External JS code:

// the buttons const btns = document.querySelectorAll(".points-btn");

// the div article that covers the entire rewards section i.e the parent container const about = document.querySelector(".toggle-container");

// the individual rewards tabs with the food description and images i.e rewards tabs div's const tabs = document.querySelectorAll(".points-tab");

// e is to access my event object

about.addEventListener("click", function (e) {

const id = e.target.dataset.id; // this is to target the id that I have added in the html. Each button AND each div has a dataset ID which we need to retrieve using this method


// here I have set up an IF statement to say. If i am clicking on a button with the ID, I want to display a certain div with the images, description etc





//"if id matches"  // the id alone container all the rewards section. I.e 25 points id, 50 points, 150 points, 200points and 400 points.

if (id) {
    // remove active from other buttons - "for each button that does not have the id that matches, remove active"
    //for each button - i.e. for every button, run this function 
    btns.forEach(function (btns) {

        btns.classList.remove("active");
        e.target.classList.add("active");

    });

    // hide the other reward tabs 
    tabs.forEach(function (tabs) {
        tabs.classList.remove("active");
    });

    // display content with the matching id 

    const element = document.getElementById(id);

    element.classList.add("active");

};

});

[A picture of the toggle tabs4