Ver Mensaje Individual
  #1 (permalink)  
Antiguo 30/09/2011, 11:26
Avatar de ColdFusion
ColdFusion
 
Fecha de Ingreso: octubre-2008
Ubicación: Tocoa, Colon Honduras C.A.
Mensajes: 419
Antigüedad: 15 años, 7 meses
Puntos: 9
Mejorando esta funcion toggle

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

Código Javascript:
Ver original
  1. function showonlyonev2(thechosenone) {
  2.       var newboxes = document.getElementsByTagName("div");
  3.       for(var x=0; x<newboxes.length; x++) {
  4.             name = newboxes[x].getAttribute("name");
  5.             if (name == 'newboxes-2') {
  6.                   if (newboxes[x].id == thechosenone) {
  7.                         if (newboxes[x].style.display == 'block') {
  8.                               newboxes[x].style.display = 'none';
  9.                         }
  10.                         else {
  11.                               newboxes[x].style.display = 'block';
  12.                         }
  13.                   }else {
  14.                         newboxes[x].style.display = 'none';
  15.                   }
  16.             }
  17.       }
  18. }

HTML
Código HTML:
Ver original
  1.    <tr>
  2.       <td>
  3.          <div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px;">
  4.             <a id="myHeader1-2" href="javascript:showonlyonev2('newboxes1-2');" >toggle</a>
  5.          </div>
  6.          <div name="newboxes-2" id="newboxes1-2" style="border: 1px solid black; background-color: #CCCCCC; display: block;padding: 5px;">Div #1</div>
  7.       </td>
  8.       <td>
  9.          <div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px;">
  10.             <a id="myHeader2-2" href="javascript:showonlyonev2('newboxes2-2');" >toggle</a>
  11.          </div>
  12.          <div name="newboxes-2" id="newboxes2-2" style="border: 1px solid black; background-color: #CCCCCC; display: none;padding: 5px;">Div #2</div>
  13.       </td>
  14.       <td>
  15.          <div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px;">
  16.             <a id="myHeader3-2" href="javascript:showonlyonev2('newboxes3-2');" >toggle</a>
  17.          </div>
  18.          <div name="newboxes-2" id="newboxes3-2" style="border: 1px solid black; background-color: #CCCCCC; display: none;padding: 5px;">Div #3</div>
  19.       </td>
  20.    </tr>

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?