Div expandible/contraible con boton

[lenders]

Hola, no se si el hilo debe ir en esta sección pero bueno.

Vereis, tengo un <div> con una noticia, en principio solo vemos el titular, la fecha de la noticia, y un boton (con forma de signo +) para expandir el <div>

La idea es que cuando pulsemos el boton, el <div> se expanda hacia abajo, y se muestre ademas de lo anterior, el contenido de la noticia y algun dato más. Tambien, cuando el <div> se expanda el boton debe convertirse en un signo - (seria cambiar la imagen del boton por otra), y que al darle a ese boton - , el <div> se contraiga.

Lo único que he conseguido hasta el momento, es hacer que la capa se expanda/contraiga cuando paso el raton por encima de ella o lo quito.

Me ayudais?

Mi código hasta el momento es este:

HTML:

Código PHP:

  <div class='tarea'> 
                <div class='titulo_tarea'> 
                Titulo de la tarea que puede ser asi de largo o mas largo aun pero no mucho porque si no sale por fuera de la capa D: bla bla bla bla bla miau miau 
                </div> 
                 
                <div class='fechas_tarea'> 
                    <div class='fecha_anadida_tarea'> 
                    A&ntilde;adida el: 
                    <br /> 
                    25/01/2012 10:00 
                    </div> 
                     
                    <div class='fecha_entrega_tarea'> 
                    Fecha de entrega: 
                    <br /> 
                    00/00/0000 00:00 
                    </div> 
                </div> 
                 
                <div class='ver_tarea'> 
                    <a href='#' onmouseover="img_on()" onmouseout="img_off()"><img src='imagenes/ver_mas.png' alt='Ver m&aacute;s' title='Ver tarea' id='img_ver_mas' /></a> 
                </div> 
            </div>  
   

CSS:

Código PHP:

   
tarea{ 
    margin: auto; 
    width: 950px; 
    height:100px; 
    border: 1px solid #CCC; 
    margin-bottom: 50px; 
    background-color: white; 
    padding-top: 12px; 
    padding-left: 15px; 
    padding-right: 15px; 
    padding-bottom: 12px; 
     
    -moz-border-radius: 6px; 
    -webkit-border-radius: 6px; 
    border-radius: 6px; 
     
    -webkit-transition: height 1s; 
    -moz-transition: height 1s; 
    -ms-transition: height 1s; 
    transition: height 1s; 
    transition-duration: 2s; 
    -moz-transition-duration: 2s; 
 
} 
 
.tarea:hover{ 
    height: 500px; 
} 
 
.titulo_tarea{ 
    height: 100px; 
    /*background-color: red;*/ 
    width: 644px; 
    float: left; 
    font-size: 25px; 
    color: #1C1C1C; 
    margin-right: 30px; 
    text-align: justify; 
} 
 
.fechas_tarea{ 
    width: 120px; 
    height: 100px; 
    float: left; 
    font-size: 12px; 
} 
 
    .fecha_anadida_tarea{ 
        height: 40px; 
        /*background-color: green;*/ 
        width: 120px; 
        float:left; 
        padding-top: 10px; 
    } 
 
    .fecha_entrega_tarea{ 
        height: 40px; 
        /*background-color: blue;*/ 
        width: 120px; 
        float:left; 
        padding-top: 10px; 
        color: #FF0033; 
    } 
 
.ver_tarea{ 
 
    height: 100px; 
    width: 100px; 
    float: left; 
    /*background-color: yellow;*/ 
    padding-left: 20px; 
    text-align: center; 
    margin-left: 30px; 
    border-left: 1px solid #CCC; 
}  
   

Javascript:

Código PHP:

  <script type="text/javascript">  
            function img_on(){ 
                document.getElementById("img_ver_mas").src='imagenes/ver_mas_over.png'; 
            } 
             
            function img_off(){ 
                document.getElementById("img_ver_mas").src='imagenes/ver_mas.png'; 
            } 
        </script>