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