Mejorando esta funcion toggle

[ColdFusion]

hola a tod@s esta funcion que voy a poner acontinuacion sirve para mostrar y ocultar objetos.

Código Javascript:

function showonlyonev2(thechosenone) {
      var newboxes = document.getElementsByTagName("div");
      for(var x=0; x<newboxes.length; x++) {
            name = newboxes[x].getAttribute("name");
            if (name == 'newboxes-2') {
                  if (newboxes[x].id == thechosenone) {
                        if (newboxes[x].style.display == 'block') {
                              newboxes[x].style.display = 'none';
                        }
                        else {
                              newboxes[x].style.display = 'block';
                        }
                  }else {
                        newboxes[x].style.display = 'none';
                  }
            }
      }
}
 

HTML

Código HTML:

<table>
   <tr>
      <td>
         <div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px;">
            <a id="myHeader1-2" href="javascript:showonlyonev2('newboxes1-2');" >toggle</a>
         </div>
         <div name="newboxes-2" id="newboxes1-2" style="border: 1px solid black; background-color: #CCCCCC; display: block;padding: 5px;">Div #1</div>
      </td>
      <td>
         <div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px;">
            <a id="myHeader2-2" href="javascript:showonlyonev2('newboxes2-2');" >toggle</a>
         </div>
         <div name="newboxes-2" id="newboxes2-2" style="border: 1px solid black; background-color: #CCCCCC; display: none;padding: 5px;">Div #2</div>
      </td>
      <td>
         <div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px;">
            <a id="myHeader3-2" href="javascript:showonlyonev2('newboxes3-2');" >toggle</a>
         </div>
         <div name="newboxes-2" id="newboxes3-2" style="border: 1px solid black; background-color: #CCCCCC; display: none;padding: 5px;">Div #3</div>
      </td>
   </tr>
</table>
 

Vean ejemplo en http://www.randomsnippets.com/2008/0...show-your-div/

Es el ultimo demo que el muestra.

Oculta la cajita desplegada al hacer click en otra, tambien oculta si hacemos click en la misma,... eso esta perfecto, lo unico que nesecito ahora es ocultar cualquier cajita que este desplegada si doy click en cualquier parte de la web que no sea el menu..

Alguien puede ayudarme?

[Panino5001]

Normalmente se hace asignándole un handler al evento onclick del objeto document.