How would I make a Div change between being hidden or visible when one of three other Divs are clicked.

For example,

**CSS**

```
#red_box {
 position:absolute;
 width:50px;
 height:50px;
 margin-top:50px;
 margin-left:50px;
 background-color:red;   
}

#green_box {
 position:absolute;
 width:50px;
 height:50px;
 margin-top:150px;
 margin-left:150px;
 background-color:green;    
}

#yellow_box {
 position:absolute;
 width:50px;
 height:50px;
 margin-top:50px;
 margin-left:150px;
 background-color:yellow;    
}

#blue_box {
 position:absolute;
 width:50px;
 height:50px;
 margin-top:150px;
 margin-left:50px;
 background-color:blue;    
}

```

**HTML**

```
<div id="red_box"></div>
<div id="yellow_box"></div>
<div id="green_box"></div>
<div id="blue_box"></div>

```

I'm looking to toggle the visibility of the red box when any of the others are clicked. So, for example, if the user clicked the yellow box, the red box would vanish and then if they clicked the green box it would reappear. However I need it so they could click these boxes in any order and everytime they click one, it would either make the red box visible or hide it, depending on whether or not it is already hidden or visible.

I hope this is making sense.

I am also curious about how I would do this with a fade effect, so instead of the red box just vanishing or appearing, it would slowly fade in or out.

Here is a [JSFiddle](http://jsfiddle.net/96TsV/1/) of the code above.

I'm unsure as whether this can be achieved solely through CSS or whether it could/should be done with JQuery. I'm also unsure as whether it would use opacities or the display:none; tag, or neither, or both.

Can anyone help me?