Is there a "click out" - tried using focusout

JavaScript
1

New to JQuery in fact today is the first time I’ve used it…I really like it though. here is what I’m after:

I have 4 icons, when they are clicked a DIV is toggled on with the addition of a class for the icon to take on it’s hover appearance.

However when I click on the next icon, now both DIVs are open. I want the first click to toggle everything back on the next click. Not sure how to do this. I was looking around and saw focusin and focusout? Is that the way to go?

<script>
$(document).ready(function(){
  $(".company").click(function(){
  $(".company").toggleClass("hoverStick");
  $(".company_info").toggle();
  });

  $(".market").click(function(){
  $(".market").toggleClass("hoverStick");
  $(".market_info").toggle();
  });

  $(".staff").click(function(){
  $(".staff").toggleClass("hoverStick");
  $(".staff_info").toggle();
  });

  $(".service").click(function(){
  $(".service").toggleClass("hoverStick");
  $(".service_info").toggle();
  });

});
</script>
2

This script changes the background colour of each of three divs after clicking a coloured icon.

The important part of this approach is that the id of the icon is used to identify its corresponding div. In this case the red icon has an id of “redB__”. The div has an id of “redD”. By picking up the id of the icon which has been clicked the id reference can be changed by replace to the id reference of the div.

The two underscores have been used here to make sure that the correct B has been replaced. Any id that has multiples of B’s may not be replaced corrrectly and will lead to errors.

While this script changes the background colour it can be modified to make other changes to the divs - say making them visible or hidden.

Notice that after the first click on a button the object reference is saved to allow the next click to clear the first change before the second change takes place.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Click out</title>
<script type="text/javascript">
 var currentDivObj=null; // global
// ------
 function init()
  { var allDivs, i;
   // collect divs with a class of "butn"
    allDivs=document.getElementsByTagName("div");
    for(i=0;i<allDivs.length;i++)
     { if(allDivs[i].className.indexOf("butn")!= -1)
         { allDivs[i].onclick=function()
              { if(currentDivObj){ currentDivObj.style.backgroundColor="#FFF"; }
              // links icons to their respective divs
                 var divRef=this.id.replace("B__","D");
                 var divObj=document.getElementById(divRef);
                 divObj.style.backgroundColor="#0FF";
              // save current div object for next click
                 currentDivObj=divObj;
               }
        }
    }
 }
 </script>
<style type="text/css">
body { font-family:arial, helvetica, sans-serif; font-weight:bold; font-size:13px; color:#000; text-align:left; margin:3px 0px; }
#wrap { border:1px solid #CCC; width:300px; height:200px; margin:50px;  }
#box  { margin-top:50px; overflow:auto;  }
.butn { float:left; width:20px; height:20px; border:1px solid #000; margin-right:10px; cursor:pointer;   }
.red  { background-color:#F00; }
.blue  { background-color:#00F; }
.green { background-color:#0F0;  }
.hue { float:left; width:40px; height:40px; border:1px solid #000; margin-right: 10px;  text-align:center; }
</style>
</head>

<body>

<div id="wrap">
  <div id="redB__" class="butn red">
  </div>
  <div id="blueB__" class="butn blue">
  </div>
  <div id="greenB__" class="butn green">
  </div>
  <div id="box">
    <div id="redD" class="hue">
      Red div</div>
    <div id="blueD" class="hue">
      Blue div</div>
    <div id="greenD" class="hue">
      Green div</div>
  </div>
</div>
<script type="text/javascript">
 window.onload=init;
</script>
</body>

</html>