Animando un poco la propiedad overflow

La propiedad overflow es esa que nos ayuda a agregar contenidos voluminosos en espacios pequeños. Como cualquier otra propiedad CSS, puede ser modifíciada dinámicamente con JavaScript, es decir, puede tener un valor pre-establecido y cambiar respondiendo a un evento como un click.

En este ejemplo, pondremos un contenedor al que le daremos una altura fija de tal forma que pueda tener cualquier contenido y ocupar siempre el mismo espacio. Usando overflow se le adosa una barra de scroll para que ese contenido sea accesible:

<div style="height: 100px;overflow-y: scroll;width:400px;">

  ....... el contenido .......

</div>

Mauris lorem eros; tincidunt vel elementum a, tempus ac ante! Etiam gravida porttitor convallis? Sed cursus cursus sem porttitor ullamcorper? Phasellus congue diam volutpat quam iaculis vel posuere dui sollicitudin! In et dui quis libero cursus fringilla a non odio. Integer sit amet lorem tortor.

Duis mauris libero, fermentum id lacinia sed, molestie sed massa. Etiam ut metus lacus, non fringilla felis. Vestibulum luctus venenatis justo id rutrum. Nullam rhoncus bibendum magna ut consectetur. Praesent suscipit ligula sit amet nibh sagittis nec lobortis mi vulputate. Nulla a turpis quis erat viverra ullamcorper at ac metus.

Definiendo su tamaño con width y height, basta establecer la propiedad overflow-y con el valor scroll para que el contenido, cualquiera sea este, no se desborde y se muestre una barra de desplazamiento vertical.

Ahora, le agregaremos un pseudo-botón (un enlace) que permitirá expandirlo o colapsarlo, es decir, cambiarle las dos propiedades que controlan ese desbordamiento.

Creamos el HTML con algunas etiquetas extras para no tener problemas y las identificamos con atributos ID para luego, poderlas manipular con JavaScript:

<div id="centrado">

  <a href="javascript:expandir();" id="elenlace">expandir</a>

  <div id="micontenedor" style="height: 200px;overflow-y: scroll;">

    ....... el contenido .......

  </div>

</div>

Y le damos un estilo; básicamente, algo así:

<style>

  #centrado { /* coloco todo en un DIV centrado */

    margin: 0 auto;

    width: 400px;

  }

  #elenlace { /* el pseudo-botón */

    float: right;

    text-decoration:none;

    width: 100px;

    /* centro el texto en ambos sentidos */

    height: 1.6em;

    line-height: 1.6em;

    text-align: center;

    /* cualquier diseño gráfico */

    background-color: #ABC;

    border-radius: 4px 4px 0 0;

    color: #234;

    font-family: Tahoma;

    font-size: 11px;

    /* lo muevo levemente para que parezca una solapa */

    margin-right: -1px;

    /* un poco de animación para divertirse */

    letter-spacing: 0px;

    -moz-transition:all 1s;

    -webkit-transition:all 1s;

    -o-transition:all 1s;

  }

  #elenlace:hover { /* efecto hover sobre el botón */

    letter-spacing: 4px;

    text-decoration:none;

  }

  #micontenedor { /* el DIV con el contenido a mostrar */

    clear: both;

    margin: 0;

    overflow-x: hidden;

    /* cualquier diseño gráfico */

    background-color: #EEE;

    border: 3px solid #456;

    color: #222;

    font-family: Georgia;

    font-size: 13px;

    outline: 1px solid #ABC;

    padding: 10px 10px 0 10px;

    text-align: justify;

    text-shadow: 1px 1px 1px #CCC;

    /* animamos el cambio */

    -moz-transition:all 1s;

    -webkit-transition:all 1s;

    -o-transition:all 1s;

    /* tanto height como overflow-y se definen en la etiqueta misma */

  }

</style>

Por último, la función expandir() que funcionará en ambos sentidos, si está colapsado lo expandirá y si está expandido lo colapsará.

Para esto, necesitamos saber la altura de ese contenido no visible ya que lo hemos "cortado". Hay dos formas básicas, la primera es simplemente cambiar esa altura que desconocemos por height:100%; y el navegador se encargará del resto.

La segunda es la que usábamos en el ejemplo para aplicar las propiedades de transición que requieren que los cambios estén expresados en la misma unidad de valor, así que si queremos que la altura pase de 200 pixeles a otra mayor y eso se muestre animado, deberemos indicar una altura en pixeles pero, no hace falta que lo sepamos con anterioridad o lo calculemos ya que JavaScript posee una función que nos dice cuál es ese valor:

document.getElementById(ID).scrollHeight

Así que vamos con nuestro script:

<script type='text/javascript'>

//<![CDATA[

function expandir() {

  el = document.getElementById("micontenedor");

  // leemos la propiedad overflowY

  if(el.style.overflowY=="scroll") {

    // si está colapsado, lo expandimos

    document.getElementById("elenlace").innerHTML = "colapsar"; // cambiamos el texto del enlace

    el.style.overflowY = "visible"; // quitamos la barra de scroll

    el.style.height = el.scrollHeight + "px";// cambiamos la altura

  } else {

    // si está expandido, lo colapsamos

    document.getElementById("elenlace").innerHTML = "expandir"; // cambiamos el texto del enlace

    el.style.overflowY = "scroll"; // agregamos la barra de scroll

    el.style.height = "200px"; // restauramos la altura

  }

}

//]]>

</script>

expandir

Donec blandit tempus congue. Ut tellus nisi, convallis nec sodales a, gravida nec justo. In hac habitasse platea dictumst. Quisque egestas tincidunt augue et dignissim.

Mauris lorem eros; tincidunt vel elementum a, tempus ac ante! Etiam gravida porttitor convallis? Sed cursus cursus sem porttitor ullamcorper? Phasellus congue diam volutpat quam iaculis vel posuere dui sollicitudin! In et dui quis libero cursus fringilla a non odio. Integer sit amet lorem tortor.

Duis mauris libero, fermentum id lacinia sed, molestie sed massa. Etiam ut metus lacus, non fringilla felis. Vestibulum luctus venenatis justo id rutrum. Nullam rhoncus bibendum magna ut consectetur. Praesent suscipit ligula sit amet nibh sagittis nec lobortis mi vulputate. Nulla a turpis quis erat viverra ullamcorper at ac metus.