If a specific class is identified, add a border to the div when clicked using JavaScript

Question

If a specific class is identified, add a border to the div when clicked using JavaScript

Is there a way to use javascript/jquery to add a border to a selected div? I have multiple rows with columns, and I want only one column per row to be highlighted with a border when clicked. Each row should have one column with a border, so it's clear which one is selected. Here's how the HTML is set up...

<div class="row">
 <div class="column"></div>
 <div class="column"></div>
 <div class="column"></div>
</div>

<div class="row">
 <div class="column"></div>
 <div class="column"></div>
 <div class="column"></div>
</div>

I'm not very skilled with js or jquery, so any help would be appreciated. Thank you!

javascript jquery css border addition

Answer 1

Answer №1

Implement a click function for every column, apply a specific class when clicked, and remove that class from all other columns:

$('.column').on('click', function() {
   $(this).addClass('selected').siblings().removeClass('selected'); 
});

Example Link

Answer 2

Implement a click function for every column, apply a specific class when clicked, and remove that class from all other columns:

$('.column').on('click', function() {
   $(this).addClass('selected').siblings().removeClass('selected'); 
});

Example Link

Answer 3

Answer №2

Make use of this particular option:

$('.box').click(function(){
      $('.box').each(function(){
           $(this).removeClass('active');
         });
     $(this).addClass('selected');
})

Answer 4

Make use of this particular option:

$('.box').click(function(){
      $('.box').each(function(){
           $(this).removeClass('active');
         });
     $(this).addClass('selected');
})

If a specific class is identified, add a border to the div when clicked using JavaScript

Answer №1

Example Link

Answer №2

Similar questions

Border utilities in Bootstrap 4 provide easy ways to add borders

I'm having trouble grasping the issue: TypeError: Unable to access the 'subscribe' property of an undefined object

The function did not execute properly, resulting in the express route returning no value

Determine if a file input is linked in React.js Material UI

Granting permission to the user

Animate.css plugin allows for owl-carousel to smoothly transition sliding from the left side to the right side

The concept of overloading operators in V8

How can we align the top edge of a div to the center of a circle within a separate div in a responsive manner?

Is there a way to replicate Twitter's "what's happening" box on our website?

Is TypeScript being converted to JavaScript with both files in the same directory?

Place an image in a div so that it is centered both vertically and horizontally

Guidelines for attaching a div to the bottom of a page?

The banner may be cropped when viewing on lower resolutions such as mobile devices or when zoomed in

Automatically submit form in Javascript upon detecting a specific string in textarea

"Exploring the benefits of using nested mapping for res.json() in an Express application

Error in Browserify Express App: Unexpected token while parsing the file

Toggle the Material UI checkbox based on the value received from an object input

`Text-overflow ellipsis should function consistently across both Firefox and Chrome browsers`

Struggling to display the array after adding a new item with the push method

What steps can I take to make sure the JavaScript runs and updates the images correctly?