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>  
  

[coterillo]

Prueba a cambiar el onmouseover por onmouseclick. Un saludo

[lenders]

El onclick funcionaria, pero he añadido este codigo (y puesto un onclick con la funcion, logicamente) y no funciona.

Código PHP:

  <script type="text/javascript">  
            function div_on(){ 
                var div = document.getElementByClass("contenido_tarea"); 
                div.style.display="block"; 
            } 
             
            function div_off(){ 
                document.getElementById("img_ver_mas").src='imagenes/ver_mas.png'; 
            } 
</script>  
  

[emprear]

Podés usar esto

http://foros.emprear.com/html/mostra...tar_capa.phtml
en tu caso, las palabras mostrar ocultar se reeplazan por el tag img para los botones
Saludos

[lenders]

Me cuesta un poco :( me podrias poner un ejemplo con lo mio?

[kseso?]

Iniciado por lenders

Me cuesta un poco :( me podrias poner un ejemplo con lo mio?

No entendí muy bien. ?Qué es "lo mio"?

[lenders]

Iniciado por kseso?

No entendí muy bien. ?Qué es "lo mio"?

Me refiero al codigo que puse en el primer post ^^

[emprear]

@lenders
la página a la que refiero contiene, 2 ejemplos funcionales, código discriminado, resaltado y comentado.
Quizá no es para nada tu intención, pero la frase "me podrías poner un ejemplo con lo mío", suena a "me haces el trabajo por favor"...
Intenta analizar los códigos, y llegado el caso, si no entiendes algo, nos dices que, y se trata de resolverlo


SAludos

[lenders]

Pues nada que no soy capaz.

Sabeis si es problema de esto? :

Código PHP:

  function div_on(){  
     var div = document.getElementByClass("contenido_tarea");  
     div.style.display="block";  
}  
   

[Miguelso]

@lenders

Te recomiendo que te plantees el tema desde un principio, de forma lógica. Cuales son las necesidades que tienes y los recursos de los que dispones. Luego realiza parte por parte las soluciones del problema y ve probando, de esa manera cuando te surja un error sabrás exactamente donde está.

Si lo tiras todo de una y pruebas y no funciona, eventualmente no serás capaz de encontrar el error en todo el problema.

Ayúdate de alguna consola que te muestre posibles errores a la hora de probar tu script.

Por otro lado sobre tu código:

Te recomiendo unificar los procesos en solamente dos funciones, la misma que muestra el contenido, debería cambiar la imagen, y viceversa.

Un error que puedo constatar es que utilizás getElementByClass, ese método javascript no existe, en todo caso deberías utilizar getElementsByClassName y no todos los navegadores lo soportan.

Seguí investigando.
Suerte.

[lenders]

gracias Miguelso, debido a que he avanzado alguna cosa y me dan error otras, creo que replanteare el tema en otro hilo