Question

I have a menu that spans several divs, I move between divs by clicking an image below the menu (a small circle) and I need that image to change to ‘active’ class to indicate which div the user is viewing. However, upon first click the div changes, but it is until the second click that the ‘active’ class is added. I would also need the first circle to be active upon opening the menu, but I can do that directly on the HTML, I believe.

The relevant part of the code would be:

$(".cubierta1").click(function () {
    $(".nav a").removeClass("active");
        $(this).addClass("active");
    $("div[id$=_options]").css("visibility", "hidden");
    $('#cubierta1_options').css("visibility", "visible");
});

And you can see the example here. Click on the first square to see the menu.

What would I need to change to make both events fire at first click?

Thanks for your help.

Answer 1

There’s two nav divs, one positioned on top of the other. When you click one of the links within a nav div, it acquires the active class, then it’s immediately hidden. What you see after you click is the other nav div that lacks the active button.

You need to get rid of one of the nav divs, and position the remaining one outside the cubierta1_options, or add the active class to all of the cubierta1 links.