CODEWITHSUNDEEP
javascriptjquerycss
Okiemute Gold
Okiemute Gold

Reputation: 548

jQuery- Loop through buttons add active class on click

enter image description hereGood day! I'm new with jQuery. Please how do I loop through buttons to bring out only its contents when I click on it, and change the active class on them each time I click.

I repeated the code below for two more buttons:

$("#member-company-btn").on("click", () => {
    $("#member-company-content").show("slow");
    $("#group-company-content").hide("slow");
    $("#abuja-sub-company-content").hide("slow");
    $("#lagos-sub-company-content").hide("slow");
})
$("#group-company-btn").on("click", () => {
    $("#member-company-content").hide("slow");
    $("#group-company-content").show("slow");
    $("#abuja-sub-company-content").hide("slow");
    $("#lagos-sub-company-content").hide("slow");
})

This to add active class to only the clicked button didn't work.

$("#subsidiary-btns .subsidiary-btn").on("click", () => {
    $("button.subsidiary-btn").removeClass("subsidiary-btn-active");
    $(this).addClass("subsidiary-btn-active");
})

Thank you

Upvotes: 3

Views: 279

Answers (1)

Okiemute Gold
Okiemute Gold

Reputation: 548

Today I decided to stay on this till it works, instead of styling differently. And Persistence paid off. Inspired to make some changes to the code. Below are the images showing a possible solution.

html code

css code

javascript code

Upvotes: 2

Related Questions