Os voy a explicar cómo programé el ampliar y disminuir que empleo en el lector de feeds en la parte superior central de la página.

Es un arreglo muy sencillo hecho simplemente con javascript. Se puede emplear para ocultar información que luego se mostrará (típicos mensajes de SPOILERS en los foros de series).

Los elementos e instrucciones que haremos servir serán:

HTML: <div>, <a> e <img>

Javascript: getElementById, Number, setTimeout, clearTimeout, replace y void.  

CSS: height, overflow

Para empezar vamos a crear dos <div>, el primero contendrá la información y el segundo contendrá los botones de ampliar y disminuir.

<div id="CapaFeed">

    "INFORMACIÓN"

</div>

<div id="MenuFeed">

    "BOTÓN MÁS Y BOTÓN MENOS"

</div> 

Una vez creadas estas dos capas podemos definir sus estilos en la CSS que tengamos o en el mismo archivo donde se va a emplear. Yo pongo el estilo que he empleado para la página.

#CapaFeed
{
    height:22px;
    overflow:hidden;
    border: 2px solid orange;
    background:white;
}

#MenuFeed
{
    background: url(../img/menufeed.gif) no-repeat;
    width:50px;
    height:20px;
    line-height:20px;
    text-align:center;
    float:left;
}

Es importante poner en la #CapaFeed el overflow a hidden ya que con esta instrucción evitamos que se muestre la información que se sale del rango de la altura de la capa. El height lo he puesto a 22px que es lo que ocupa una línea del contenido. 

Una vez tengamos hecho esto falta el toque final, que son las instrucciones javascript para crear el efecto. Primero crearemos los dos botones (+,-) que servirán para ampliar o reducir capa. El código de creación es el siguiente:

<a href="javascript:void(0)" onclick="movabajo();">

    <img src="img/plus.png" height="15" border="0"></img>

</a>
<a href="javascript:void(0)" onclick="movarriba();">

    <img src="img/minus.png" height="15" border="0"></img>

</a>

Como os fijareis el enlace del botón llama a una instrucción javascript llamada "void(0)" que lo que hace es evitar cualquier acción del link cuando se clica. Luego en el evento onclick llamamos a la instrucción movabajo() para ampliar y movarriba() para reducir:

function movabajo()
{
    puntsup=document.getElementById("CapaFeed").style.height;
    puntsup = puntsup.replace(/px/,"");
    puntsup = new Number(puntsup);
    if ((puntsup<122)&&(detenido==0))
    {
        ocupado=1;
        puntsup+=dis;
        document.getElementById("CapaFeed").style.height=puntsup+'px';
        t = setTimeout('movabajo()',10);
    }else if ((puntsup>122))
    {
        ocupado=0;
        clearTimeout(t);
        detenido=0;
        document.getElementById('CapaFeed').style.overflow='visible';
    }
}

Lo primero que hacemos es captar la altura de la capa y pasarla a real mediante las funciones replace y Number. Luego comprobamos que no se desplegue más de 122 pixels y de mientras aumentamos en un valor predefinido (variable dis) la altura de la capa. Finalmente con la instrucción setTimeout hacemos una llamada recursiva de la misma función cada 10 milisegundos.

Cuando la altura de la capa es superior a 122 pixels, el overflow se hace visible y se para el proceso de ampliar la capa. 

function movarriba()
{
    puntsup=document.getElementById("CapaFeed").style.height;
    puntsup = puntsup.replace(/px/,"");
    puntsup = new Number(puntsup);
    if ((puntsup>22)&&(detenido==0))
    {
        ocupado=1;
        puntsup-=dis;
        document.getElementById("CapaFeed").style.height=puntsup+'px';
        t = setTimeout('movarriba()',10);
    }else if ((puntsup<22))
    {
        ocupado=0;
        clearTimeout(t);
        detenido=0;
        document.getElementById('CapaFeed').style.overflow='hidden';
    }
}

Idem que la función movabajo() pero reduciendo la altura de la capa y cambiando el overflow a hidden.

Con esto ya tendreis vuestra propia capa desplegable. 

Actualización del script en FE DE ERRATAS