English Português

Esta es una método con el cual al dar click en una flecha se muestra el contenido de una tabla mediante CSS y Javascript y te permite volverla a comprimir. Es bastante util cuando tenemos mucho contenido y deseamos que sea el usuario que ver.

  1. El script para la expansión de la tabla es el siguiente:
    <script language="javascript">
    function tablecollapse()
    {
    /* Variables */
    var collapseClass='footcollapse';
    var collapsePic='http://bp3.blogger.com/_Zuzii37VUO4/RfDr-iAns1I/AAAAAAAAAXQ/K6QjlxnM9ts/s1600/arrow_up.gif'; //Nombre de la imagen de la flecha hacia arriba
    var expandPic='http://bp1.blogger.com/_Zuzii37VUO4/RfDsECAns2I/AAAAAAAAAXY/yCUO7_DpwIo/s1600/arrow_down.gif'; //Nombre de la imagen de la flecha hacia abajo
    var initialCollapse=true;
    // Verfica la clase que tiene la tabla
    var t=document.getElementsByTagName('table');
    var checktest= new RegExp("(^|\s)" + collapseClass + "(\s|$)");
    for (var i=0;i<t.length;i++)
    {
    // Sí la tabla no tiene la propiedad adecuada la salta.
    if(!checktest.test(t[i].className)){continue;}
    // Crea un pie de página clickable
    t[i].getElementsByTagName('tfoot')[0].onclick=function()
    {
    // Verifica todo el cuerpo de la tabla y la muestra u oculta
    var tb=this.parentNode.getElementsByTagName('tbody');
    for(var i=0;i<tb.length;i++)
    {
    tb[i].style.display=tb[i].style.display=='none'?'':'none';
    }
    // Cambia la imagen de acuerdo a si esta expandida o contraida
    var li=this.getElementsByTagName('img')[0];
    li.src=li.src.indexOf(collapsePic)==-1?collapsePic:expandPic;
    }
    // Sí el cuerpo puede ser contraido lo hace
    if(initialCollapse)
    {
    var tb=t[i].getElementsByTagName('tbody');
    for(var j=0;j<tb.length;j++)
    {
    tb[j].style.display='none';
    }
    }
    // Agrega un link a la imagen
    // Acesa a la última celda en el pie de tabla
    var newa=document.createElement('a');
    newa.href='#';
    newa.onclick=function(){return false;}
    var newimg=document.createElement('img');
    newimg.src=initialCollapse?expandPic:collapsePic;
    var tf=t[i].getElementsByTagName('tfoot')[0];
    var lt=tf.getElementsByTagName('td')[tf.getElementsByTagName('td').length-1];
    newa.appendChild(newimg);
    lt.insertBefore(newa,lt.firstChild);
    }
    }
    // Corre el script al cargar la página.
    window.onload=tablecollapse;
    </script>
  2. Ahora definimos los estilos a los que podemos personalizar con nuestro propio diseño pero es importante mantener los mismo nombres de las clases (a menos que también las cambies en el script).
    <style type="text/css">
    table.footcollapse{
     width:30em;
     }
     table.footcollapse caption{
     font-size:120%;
     text-transform:uppercase;
     text-align:left;
     padding:.5em 1em;
     }
     table.footcollapse th{
     text-align:left;
     }
     table.footcollapse,table.footcollapse th,table.footcollapse th
     {
     border:none;
     border-collapse:collapse;
     }
     table.footcollapse thead th
     {
     width:10em;
     border-style:solid;
     border-width:1px;
     border-color:#cff #69c #69c #cff;
     background:#99CC00;
     padding:2px 10px;
     }
     table.footcollapse tfoot th,
     table.footcollapse tfoot td
     {
     border-style:solid;
     border-width:1px;
     border-color:#9cf #369 #369 #9cf;
     background:#99CC00;
     padding:2px 10px;
     }
     table.footcollapse tbody{
     background:#ddd;
     }
     table.footcollapse tbody td{
     padding:5px 10px;
     border:1px solid #999;
     }
     table.footcollapse tbody th{
     padding:2px 10px;
     border:1px solid #999;
     border-left:none;
     }
     table.footcollapse tbody tr.odd{
     background: #BFDFFF;
     }
    table.footcollapse tfoot td img{
     border:none;
     vertical-align:bottom;
     padding-left:10px;
     float:right;
     }
    </style>
  3. Para aplicarlo a nuestro web tenemos que hacer una tabla con la estructura del sigiente ejemplo:
    <table summary="Comparación de servicios de blog gratuito " class="footcollapse">
      <caption>
      comparación de Servicios de blog gratuito
      </caption>
     <thead>
      <tr>
      <th>Blogs gratis </th>
      <th>Publicidad</th>
      <th>Personalizable</th>
      </tr>
      </thead>
     <tfoot>
      <tr>
      <th>Mejor opción </th>
      <td colspan="2">Blogger</td>
      </tr>
      </tfoot>
      <tbody style="display: none;">
      <tr>
     <th>Wordpress</th>
      <td>No</td>
      <td>No</td>
      </tr>
      <tr class="odd">
      <th>MovableType</th>
      <td>Si</td>
     <td>Si</td>
      </tr>
      <tr>
      <th>Blogger</th>
      <td>No</td>
      <td>Si</td>
      </tr>
      </tbody>
      </table>
    

Como muchas cosas, puede ser complicado de implementar la primera vez pero después es más fácil y útil. Les dejo el ejemplo y ojala que les sirva:

DESCARGAR EJEMPLO

FUENTE: Christian Heilmann

Escrito por Francisco Oliveros

Soy un gran aficionado del diseño y de todo lo que el código puede comunicar. Ingeniero mecánico por profesión, pero dedicado al desarrollo web a tiempo completo.

Blog / Twitter

Artículos relacionados

Sigue leyendo consejos, tips y tutoriales para tu blog.

    Comentarios

    1. Pablo / Hace 10 años /

      Ante todo muy buenas tardes, a pesar del invierno. Muy bueno y completo el contenido de tu pagina, dinamica y de facil acceso.
      Hace tiempo que doy vueltas en la web con uno que otro objetivo: poner dinamico mi blog. Si bien no se nada de programacion me las he rebuscado en llegar a buen puerto con mi imaginacion y empeño (terquedad) aunque ahora hago aguas y siento haber llegado a tu pagina casi consiguiendo lo que necesito.
      Lo que quisiera es que me guies en como hacer un menu desplegable sin fondo, o sea que respete el fondo de la pagina. Este menu desplegable lo quisiera implementar en los links pues hay muchos de mis amigos que tienen mas de un sitio y se hace una fila interminable si tienen que estar a la vista ( ademas se ve horrible).
      Espero haber sido claro en este invierno.
      Saluda atte Pablo.

      Responder a Pablo →
    2. Francisco / Hace 10 años /

      Hola Pablo!

      Gracias por tus comentarios, por lo que dices, creo que podría servirte este artículo: “Menú desplegable con Javascript”. Y la trasparencia del menú lo consigues cambiando los estilos del mismo.

      Un saludo y espero te sea de utilidad.

      Responder a Francisco →
    3. alejandro / Hace 10 años /

      Esto es exactamente lo que estaba buscando, he probado otras opciones pero no me placen en lo más mínimo. Gracias y hasta pronto. Ale

      Responder a alejandro →
    4. alejandro / Hace 8 años /

      Hola fran, ante todo, gracias por las utilidades de tu web.
      paso a la consulta; donde agrego el scrip(en que parte de la plantilla)? lo alojo previamente o lo pongo directamente? eso nada mas, un abrazo.
      gracias

      Responder a alejandro →
    5. DaycareWeb / Hace 7 años /

      Hola Francisco,
      Me leido tu entrada para ver si en ella podria encontrar alguna idea que me aclarara respecto a lo que quiero lograr.
      Por favor, necesito una ayuda en:
      Quiero lograr mostrar/ocultar una imagen al marcar/desmarmar una casilla de verificacion. Llevo varios dias en esto y no he podido solucionarlo. He intentado muchas cosas, pero hasta ahora solo he logrado presentar la imagen oculta pero al marcar la casilla no se habilita la imagen.
      En terminos de programacion escrita, te diria, que necesito:
      evento 1: mostrar casilla verificacion + texto + imagen (hidden, sin href);(esto lo he logrado).
      evento 2: si la casilla de verificacion es “true” mostrar evento 3 y si es “false” mostrar evento 1.
      evento 3: mostrar imagen “visible” + href
      Muchas gracias

      Responder a DaycareWeb →
    6. DaycareWeb / Hace 7 años /

      Hola Francisco,

      Por favor, tengo un gran problema: me registré gratis en 250free.com y alojé allí todas mis imagenes y archivos, y desde ayer esta fuera de servicio y no me dan explicaciones. Podrías recomendarme algun alojamiento (gratis, de momento) que pueda registrarme y redireccionar mis enlaces hacia allí.
      Lo otro es, deseo ocultar los titulos de las paginas estaticas al ser cargadas, es decir cuando pinchas la pagina estatica, y te sale, aparece el titulo en la “entrada”, eso no quiero mostrarlo. Si esto no es posible, cómo se puede enlazar una pagina estatica con una entrada, de manera que cuando pinchas la pagina estatica te salga dicha entrada.
      Muchas gracias por todo.

      Responder a DaycareWeb →
    7. Optozi / Hace 5 años /

      Gracias, era justo lo que buscaba, con la salvedad de que yo quiero que la expansión se produzca pulsando la fila superior, no la de abajo, ya que pretendo que la tabla nueva que aparezca sea como una extensión de datos de la fila superior. ¿Qué habría que cambiar en el código? 😐

      Responder a Optozi →
    8. Optozi / Hace 5 años /

      Que bueno, lo he conseguido yo mismo ^_^, simplemente sustituyendo “footcollapse” por “headcollapse”, y “tfoot” por “thead” . Ahora se colapsa o se expande pulsando la primera fila 😀

      Responder a Optozi →

    Responder

    ¡Gracias por dejar tu opinión! Por favor procura que tus comentarios estén dentro tema, que no sean promocionales (spam), ilegales u ofensivos, de otro modo, serán borrados. Todos los enlaces serán moderados y la URL indicada NO será enlazada.

    Blog and Web es un blog de Blógstica. Hospedado desde 2008 en Liquid Web.

    Términos de uso - Política de privacidad