Modify the button's border color upon click action

Question

Modify the button's border color upon click action

I am looking to implement a feature where the border of a button changes when clicked once and reverts back when clicked again. This should apply individually to each of the 16 buttons with the same class. Additionally, I want to enable the ability to click on multiple buttons simultaneously or all at once.

HTML

<button onclick="TogglePkgGroups('M16.1')" class="pool" id="M16.1">M16.1</button>
<button onclick="TogglePkgGroups('M16.2')" class="pool" id="M16.2">M16.2</button>
<button onclick="TogglePkgGroups('M17')" class="pool" id="M17">M17</button>
<button onclick="TogglePkgGroups('MR17')" class="pool" id="MR17">MR17</button>
<button onclick="TogglePkgGroups('MSS16c')" class="pool" id="MSS16c">MSS16c</button>
<button onclick="TogglePkgGroups('MSS17')" class="pool" id="MSS17">MSS17</button>
<button onclick="TogglePkgGroups('MSS17c')" class="pool" id="MSS17c">MSS17c</button>
<button onclick="TogglePkgGroups('T15.0')" class="pool" id="T15.0">T15.0</button>
<button onclick="TogglePkgGroups('T15.0c')" class="pool" id="T15.0c">T15.0c</button>
<button onclick="TogglePkgGroups('T15.5')" class="pool" id="T15.5">T15.5</button>
<button onclick="TogglePkgGroups('T15.5c')" class="pool" id="T15.5c">T15.5c</button>
<button onclick="TogglePkgGroups('T15.8')" class="pool" id="T15.8">T15.8</button>
<button onclick="TogglePkgGroups('T15.8c')" class="pool" id="T15.8c">T15.8c</button>
<button onclick="TogglePkgGroups('T16.2')" class="pool" id="T16.2">T16.2</button>
<button onclick="TogglePkgGroups('T16.2c')" class="pool" id="T16.2c">T16.2c</button>
<button onclick="TogglePkgGroups('T16.5')" class="pool" id="T16.5">T16.5</button>

javascript jquery html css

Answer 1

Answer №1

<button class="pool" id="M16.1">M16.1</button>
<button class="pool" id="M16.2">M16.2</button>
<button class="pool" id="M17">M17</button>
<button class="pool" id="MR17">MR17</button>
<button class="pool" id="MSS16c">MSS16c</button>
<button class="pool" id="MSS17">MSS17</button>
<button class="pool" id="MSS17c">MSS17c</button>
<button class="pool" id="T15.0">T15.0</button>
<button class="pool" id="T15.0c">T15.0c</button>
<button class="pool" id="T15.5">T15.5</button>
<button class="pool" id="T15.5c">T15.5c</button>
<button class="pool" id="T15.8">T15.8</button>
<button class="pool" id="T15.8c">T15.8c</button>
<button class="pool" id="T16.2">T16.2</button>
<button class="pool" id="T16.2c">T16.2c</button>
<button class="pool" id="T16.5">T16.5</button>

Javascript function:

$(function(){
 $(this).click(function(){
   $($this).toogleClass('select-pool');
 });
});

CSS for select-pool:

.select-pool{
  border-color: blue/*change it according to your preference*/
}

Answer 2

<button class="pool" id="M16.1">M16.1</button>
<button class="pool" id="M16.2">M16.2</button>
<button class="pool" id="M17">M17</button>
<button class="pool" id="MR17">MR17</button>
<button class="pool" id="MSS16c">MSS16c</button>
<button class="pool" id="MSS17">MSS17</button>
<button class="pool" id="MSS17c">MSS17c</button>
<button class="pool" id="T15.0">T15.0</button>
<button class="pool" id="T15.0c">T15.0c</button>
<button class="pool" id="T15.5">T15.5</button>
<button class="pool" id="T15.5c">T15.5c</button>
<button class="pool" id="T15.8">T15.8</button>
<button class="pool" id="T15.8c">T15.8c</button>
<button class="pool" id="T16.2">T16.2</button>
<button class="pool" id="T16.2c">T16.2c</button>
<button class="pool" id="T16.5">T16.5</button>

Javascript function:

$(function(){
 $(this).click(function(){
   $($this).toogleClass('select-pool');
 });
});

CSS for select-pool:

.select-pool{
  border-color: blue/*change it according to your preference*/
}

Modify the button's border color upon click action

Answer №1

Similar questions

Display the value of a JavaScript variable in a Codeception Acceptance test

Detect if the user is using Internet Explorer and redirect them to a different

Guide on how to clear and upload personalized information to Stormpath

What is the best method to assign the value of a useState variable to a specific field in an array of objects for inserting data in

New poster image displayed at the conclusion of the video (media javascript)

Performing updates on Meteor.users collection while handling a promise rejection (leveraging fcm-push with Meteor)

click events in backbone not triggering as expected

Identify which browsers are compatible with HTML5 video autoplay detection

What can we do to address these strange actions? When hovering over a link, make the div fade in, and when the mouse leaves, fade out the div

Tips for creating a column with add, edit, and delete buttons in PHP

Filtering Tables with AngularJS

I am currently working on creating a navigation bar for a webpage using the express framework and pug library. However, when I navigate to the demo page endpoint, the screen appears blank and nothing is displayed

I'm having trouble getting this button and icon to align properly. How can I fix this misalignment

Submitting an HTTP POST REQUEST with both an image and text

The Vue-router is constantly adding a # symbol to the current routes, and it's important to note that this is not the typical problem of hash and

Having trouble passing JSON data from JQuery to ASP.Net MVC using AJAX calls?

What is the proper way to implement history.js on my website?

The application is experiencing issues with loading Django's CSS files properly

What is the best way to dynamically update a state that is deeply nested?

What is the best way to activate the default action/event of an HTML link (anchor element)?