Sample color-boxes

for SO: http://stackoverflow.com/questions/20236190/using-jquery-change-display-block-to-none-cant-run-into-block-again/

HTML

<div class="color_area" style="float:left">
  <div class="blue" data-color="blue">BLUE</div>
  <div class="green" data-color="green">GREEN</div>
  <div class="red" data-color="red">RED</div>
</div>

<table id="clickable">
  <td>
    <tr> <div class="clickable blue"> </div> </tr>
    <tr> <div class="clickable green"> </div> </tr>
    <tr> <div class="clickable red"> </div> </tr>
  </td>
  <tr>
    <td> <div class="clickable red"> </div> </td>
    <td> <div class="clickable green"> </div> </td>
    <td> <div class="clickable blue"> </div> </td>
  </tr>
  <tr>
    <td> <div class="clickable green"> </div> </td>
    <td> <div class="clickable blue"> </div> </td>
    <td> <div class="clickable red"> </div> </td>
  </tr>

</table>

CSS

.color_area div{ width: 100px; height: 100px;}
  div.clickable{width: 50px; height: 50px;}
  .blue{background: blue;}
  .green{background: green;}
  .red{background: red;}
  table#clickable{border: 1px solid white;}
  div.clickable{display: none;}