CODEWITHSUNDEEP
javascriptjquery
Farha khan
Farha khan

Reputation: 11

how to show border of clicked div only?

I need a help in this jquery or javascript problem. I have many divs with some particular ids and onclick that div the border should get changed and onclick another div with different id the border of that div again get changed like previous div but border of previous div get removed.

Upvotes: 1

Views: 5509

Answers (6)

T. Dirks
T. Dirks

Reputation: 3676

Look at the snippet below to see my attempt. What it does is once you click on a div with the class clickable the code removes the border class from the previous div, adds the border class to the newly clicked div and updates the prevDiv.

I prefer this method because where other people use $('div').css('border', 'none'); to remove all the borders from every div, this code only removes the border from the previously clicked div. Thus allowing you to have (non clickable) divs with a predefined border/border class.

let prevDiv;

$(".clickable").click(function(){
  $(prevDiv).removeClass('border');
  $(this).addClass('border');
  
  prevDiv = $(this);
});
.clickable {
  width:100px;
  height:100px;
  margin: 10px;
  display: inline-block;
  margin-right: 25px;
}

.border {
  border: 5px solid black;
}

#firstID {
  background-color: red;
}

#secondID {
  background-color: orange;
}

#thirdID {
  background-color: lime;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="clickable" id="firstID">Placeholder text</div>
<div class="clickable" id="secondID">Placeholder text</div>
<div class="clickable" id="thirdID">Placeholder text</div>

Upvotes: 1

Risheekant Vishwakarma
Risheekant Vishwakarma

Reputation: 1046

<style>
.mydiv {
  width:100px;
  height:100px;
  background-color:yellow;
  float:left;
  margin:10px;
}
.active{
  border: 10px solid black;
}
</style>

<div class="mydiv">A</div>
<div class="mydiv">B</div>
<div class="mydiv">C</div>

<script>
  $(".mydiv").click(function(){

    $(".mydiv").removeClass('active');
    $(this).addClass('active');

  });
</script>

Upvotes: 1

Erick Wachira
Erick Wachira

Reputation: 85

Try this:

// The class div class is the div tag if you want and Id replace
// Replace the . with a #
$(".the_div_class").click(()=>{
  $(".the_div_class").addClass("the_border_class");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Upvotes: 0

Sirisha
Sirisha

Reputation: 129


    $('div').click(function(){
       $('div').css('border', 'none');
       $(this).css('border', '1px solid black');
    });

NOTE: Replace the $(div) with the relevant parent element's ID or class.

Upvotes: 0

hardy
hardy

Reputation: 901

you can write in java script -

let yourDivIds =["your_div1","your_div2"];  // specify all your div ids

function removeGlowingDivs() { // this will remove class from other div's
    yourDivIds.forEach(item=>{
        document.getElementById(divID).removeClass('your_class_name');
    })
}

// add this on click event on all div's
function highlightDiv(divID) { // this will add class

    removeGlowingDivs();
    document.getElementById(divID).addClass('your_class_name');
}

Upvotes: 0

Risheekant Vishwakarma
Risheekant Vishwakarma

Reputation: 1046

$(".mydiv").click(function(){

$(this).css('border','10px solid black');

});
.mydiv
{
width:100px;
height:100px;
background-color:yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
</head>
<body>
<div class="mydiv">ABCD</div>

</body>
</html>

Upvotes: 0

Related Questions