Iterate through buttons using jQuery and apply an active class when clicked

https://i.sstatic.net/R7Yc4.pngHey there! I'm a beginner when it comes to jQuery. Can someone please guide me on how to loop through buttons, display their contents when clicked, and update the active class each time a button is clicked?

I have duplicated the code below for two additional 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");
})

However, my attempt to add an active class only to the clicked button did not work as expected.

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

Thank you!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Splitting jQuery - discover and distribute all price categories

I am faced with a challenge on my page where I have a list of items each displaying prices in GBP. The price is enclosed within a span element with a class of "price". My goal is to change the value of all the prices by dividing them by 1.2. Here's an ...

Guide to executing Javascript instructions across multiple lines in Selenium Basic

Currently, I'm utilizing VBA Selenium Basic to parse through an HTML document in attempt to modify the attribute style within a td element. Despite my efforts, I have been unsuccessful in finding methods such as webelement.RemoveAtrr, webelement.SetAt ...

Modify the database fields according to the information provided by the user inputs

Within my database, there exists a table named names that includes various columns such as Fname, Lname,Age_chkd,gndr_chkd,profession_gdk, and more. I have created a table to showcase these values: <table> <tr> <td>First Nam ...

Remove the input box for submission from the HTML code

How can I remove the 'button' from my input field and replace it with an image? Even after trying different methods, the box still appears. Thank you. <!DOCTYPE html PUBLIC ""> <head> <style> #PlusMinus{background:url(&apo ...

Using jQuery to dynamically update elements as the user scrolls

Looking to dynamically update the position of a div on a webpage as the user scrolls down? Check out this JavaScript script that utilizes a h2 HTML element to display the y-coordinate of the element. To see the script in action, visit the following jsFiddl ...

My jQuery function is failing to execute properly following an AJAX callback

I am currently utilizing asp.net 3.5 on my project. Everything operates smoothly with a jquery function triggered by the 'hover' event. An issue arises after refreshing the browser, which triggers some divs to update using ajax calls. After th ...

What is the best way to ensure uniform height for all div elements using JavaScript?

I'm working on creating a tool that can find the tallest element among a group of elements and then adjust the height of all elements to match the tallest one. Within this tool, I'm attempting to pass a selector to a JQuery method that is locate ...

Discover the Magic Trick: Automatically Dismissing Alerts with Twitter Bootstrap

I'm currently utilizing the amazing Twitter Bootstrap CSS framework for my project. When it comes to displaying messages to users, I am using the alerts JavaScript JS and CSS. For those curious, you can find more information about it here: http://get ...

Tips for avoiding identical selections in multiple drop-down menus within a table and sending the data to the server via a POST request

For instance: visualizing a chart of infants, where each row the user chooses baby GenderDropDown, then picks a name. It's crucial to prevent duplicate name selections throughout the chart. If a user selects Male & John, that choice should not be ...

JavaScript calculation: how tall is the image?

Can you calculate the CSS height of an image with a width of 3px? The original image is: - Height: 400px - Width: 800px I have attempted to: Convert the 3px into a percentage based on the original image width: function getPercentageOfWidth(v){ return ...

Guide to creating an Event using Composition API in Vue3

I am currently implementing this feature within a vue3 component: <template> <div class="hamburger-toggle" @click="toggle" :class="{ nav__open: isActive }"> </template> <script> export default { ...

Form in HTML with Automatic Multiplication Functionality in pure JavaScript

I'm struggling with integrating a simplified HTML form with JavaScript to dynamically adjust and multiply the entered amount by 100 before sending it via the GET method to a specific endpoint. Below is the HTML form: <body> <form method= ...

JavaScript does not automatically trigger a function when the value of an input field is changed

I am working on a bootstrap modal form that has multiple input fields. One of the input fields contains the names of states and should display the corresponding region in another field. However, when I change the value of the state field, the region value ...

When you hover over it, the text moves above the background content

I am looking to enhance my table by having the text expand and hover over the content with a white background. I have achieved the expand effect, but I am struggling to get the overflow to work properly. You can view the code in action on JsFiddle: JsFiddl ...

What is the most efficient method for utilizing a jQuery selector in terms of performance?

I'm working on optimizing the JavaScript code for our website and could use some advice on what to do and what to avoid. Currently, we are utilizing jQuery 1.7.1 as our library. While I may be new to optimizing/writing optimized code, one thing I und ...

How can I go about importing and modifying Excel data in Angular version 6?

Incorporating the bulk import module into my current project involves importing records from an Excel file, viewing and editing these records in local storage. I am currently struggling to find a solution for implementing this functionality using Angular ...

Build an immersive experience by incorporating threejs into A-Frame to develop a spherical environment filled with 360-degree videos

I've been working on a VR project that involves 360° videos in VR. My concept was to construct a sphere and apply a 360° video as the material. I've already managed to create my own Sphere Component and map a 360° image onto it! Similar to t ...

What advantages does using an RxJS Subject have over handling multiple event listeners individually in terms of speed

After investigating a page's slow performance, I identified an angular directive as the root cause. The culprit was a piece of code that registered event listeners on the window keydown event multiple times: @HostListener('window:keydown', ...

Encountering a "Web Storm identifier expected" error while attempting to pass Vue function parameters using braces

This is the code I've been working on. I encountered an error while coding. Can you help me figure out how to address this issue? Should I consider disabling the inspection feature in WebStorm, or should I make changes to the code style? I have alre ...

html5sql - Struggling to establish a connection with my database

I recently started using html5sql.com for my html5 DB needs and I must say, it's a fantastic module! However, I've hit a roadblock. In my index.html/index.js file, I have set up my database and created tables in it. try { html5sql.open ...