Home/ Questions/Q 7858243

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-02T21:20:19+00:00

I would like to change the style on a div with an onclick… and

  • 0

I would like to change the style on a div with an onclick… and remove the style when clicking somewhere outside of the div.

I have the following code setup… can someone help me to remove the style on the divs if you click anywhere else on the page?

<head>
  <style type="text/css">
     .account{
      width: 100px;
      height: 100px;
      border: 1px solid #000;
     }
    .selected{
     border: 2px solid #F00;
    }
  </style>
  <script type="text/javascript">
   $(document).ready(function(){
   $(".account").click(function(){
   $(".selected").removeClass("selected");
   $(this).addClass("selected");
  });   
  });
  </script>
</head>
<body>
 <h1>the test</h1>
 <div class="account">test 1</div>
 <div class="account">test 2</div>
</body>

Thank you very much for any help you can give me!!!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Try this.

    $(document).ready(function(){
   $(".account").click(function(e){
       $(".selected").removeClass("selected");
       $(this).addClass("selected");
       e.stopPropagation();//This will stop the event bubbling 
   });   

   //This event handler will take care of removing the class if you click anywhere else
   $(document).click(function(){ 
       $(".selected").removeClass("selected");
   });
});

    Working demo – http://jsfiddle.net/yLhsC/

    Note that you can use on or delegate to handle click event on account elements if there are many on the page.

    Something like this.

    Using on if using jQuery 1.7+

    $('parentElementContainingAllAccounts').on('click', '.account', function(e){
     $(".selected").removeClass("selected");
     $(this).addClass("selected");
     e.stopPropagation();//This will stop the event bubbling 
});

    Using delegate

    $('parentElementContainingAllAccounts').delegate('.account', 'click', function(e){
     $(".selected").removeClass("selected");
     $(this).addClass("selected");
     e.stopPropagation();//This will stop the event bubbling 
});
    • 0