Consulta de un inexperto en JavaScript

[Computer XTress]

Hola a todos!

Quisiera comentarles que estoy preparando un portal bastante grande, mayormente trabajo en PHP ya que es mi fuerte, y de Java script la verdad, no les voy a mentir no se nada.

¿Por que acudo a ustedes entonces? quiero hacer algo que se que Java es la herramienta que necesito, y simplemente les quisiera pedir una orientacion, algo como puntapie inicial asi yo podria ponerme a leer algo y desarrollar la aplicacion.

Lo que deseo lograr:

Tengo una seccion de articulos educativos en mi web en donde cada articulo se le presenta al usuario como un rectangulo de aprox. 50 x 300 pixels.
Dentro del rectangulo tengo varias lineas que corresponden a "TITULO, FECHA, AUTOR, DESCRIPCION, LEER ESTE ART...".

Yo decia... estaria muy bueno que al entrar a la seccion en vez de ver los rectangulos tan grandes se vea un rectangulo de 100 x 15 pixels con solo "TITULO" y "FECHA", y un boton que al clickearlo agrande el recuadro, dejando ver todo el resto del contenido del rectangulo. A su vez, al volverlo a clickear q se ajuste a las medidas pequeñas nuevamente.

Bueno, se que existen controles en java para controlar los atributos de un elemento segun su ID. Por ende, creo que es posible hacer esto.

¿Que me recomiendan? ¿Por donde empiezo despues de leer algunos tutoriales de JS? ¿Habra alguna aplicacion pre-fabricada que pueda bajar para ver como esta programada?

Mus mas sinceros agradecimientos por su tiempo y ayuda.
Atte.

[isaacluz]

Aqui uno de ejemplo.. usé tablas para contener los datos.. tú los acomodas a como te convenga...

Código:

<script type="text/javascript">
function MostrarEsconder(Elemento,Link){
	Documento=document
	Objeto=(Documento.all)?Documento.all[Elemento]:Documento.getElementById(Elemento);
	if(!Objeto.Contador)Objeto.Contador=0;
	Objeto.style.display=(Objeto.Contador++%2)?"none":"";
	Link.innerHTML=(Objeto.Contador%2)?"(-)":"(+)";
	return false
}
</script>
<table width="100"  border="1" cellspacing="0" cellpadding="2">
<tr><td>
	titulo, fecha <a href="#" onClick="return MostrarEsconder('Noticia1',this)">(+)</a></td>
</tr>
<tr><td id="Noticia1" style="display:none;">
	autor, descripcion, leer este art...bla, bla bla, bla.....
</td></tr>
</table>
<hr>
<table width="100"  border="1" cellspacing="0" cellpadding="2">
<tr><td>
	titulo, fecha <a href="#" onClick="return MostrarEsconder('Noticia2',this)">(+)</a></td>
</tr>
<tr><td id="Noticia2" style="display:none;">
	autor, descripcion, leer este art...bla, bla bla, bla.....
</td></tr>
</table>

[Computer XTress]

IMPECABLE !!!!!!

No te hubieras molestado en serio!!! Espero no te haya llevado mucho tiempo.

1000000000000000000000000000 gracias!!!!