Por fin he conseguido lo que buscaba, hacer unas tarjetas de noticias que al darle a un link y mediante una funcion mostrase contenido oculto, lo podria dejar tal y como esta pero eso de tener que recurrir a IDs me parece poco profesional sobre todo cuando se va a tener gran cantidad de informacion, puede resultar muy lioso, ahora bien os dejo el codigo para que lo checkeis, existe alguna manera de formalizar todo esto? ahorrar lineas de codigo o simplificarlo, busco vuestra opinion y consejo.Gracias
Por cierto existe un getElementById pero no hay nada para las clases sin tener que recurrir a una funcion la tira de larga? Aun no se ha implantado el getElementByClass? porque la verdad eso seria lo que optimizaria mi script(creo yo)
Código HTML:
<script type="text/javascript">
function mostrar_noticia(id){
document.getElementById(id).style.visibility="visible";
}
function ampliar(id){
document.getElementById(id).style.height="auto";
}
function ocultar_noticia(id){
document.getElementById(id).style.visibility="hidden";
}
function cerrar(id){
document.getElementById(id).style.height="170px";
}
</script>
</head>
<body>
<!--Plantilla de tarjeta de notcias-->
<div class="contenedor_principal" id="contenedor_principal">
<div name="contenedor_fecha/titular">
<!--Principio del subcontenedor de la fecha-->
<div class="contenedor_fecha">
<div class="dia">dd</div>
<div class="mes">mm</div>
<div class="año">aaaa</div>
</div>
<!--Fin del subcontenedor de fecha-->
<!--Principio del subcontenedor de titulares-->
<div class="contenedor_titular">
<div class="titular">titular</div>
<div class="subtitular">subtitular</div>
</div><!--Fin subcontenedor del titular-->
</div>
<!--Final contenedor fecha/titular-->
<!--Principio contenedor de noticia-->
<div class="contenedor_noticia">
El texto de la noticia aqui - El texto de la noticia aqui - El texto de la noticia aqui - El texto de la noticia aqui - El texto de la noticia aqui - El texto de la noticia aqui - El texto de la noticia aqui - El texto de la noticia aqui - El texto de la noticia aqui - El texto de la noticia aqui - El texto de la noticia aqui - El texto de la noticia aqui - El texto de la noticia aqui - El texto de la noticia aqui - El texto de la noticia aqui - El texto de la noticia aqui - El texto de la noticia aqui - El texto de la noticia aqui - El texto de la noticia aqui - El texto de la noticia aqui - El texto de la noticia aqui - <a href="javascript:mostrar_noticia('not_oculta'); ampliar('contenedor_principal')" class="link_leermas">leer mas</a></div>
<!--Resto de la noticia oculta-->
<div id ="not_oculta" class="noticia_oculta" style="visibility:hidden">
El texto de la noticia aqui - El texto de la noticia aqui - El texto de la noticia aqui - El texto de la noticia aqui - El texto de la noticia aqui - El texto de la noticia aqui - El texto de la noticia aqui - El texto de la noticia aqui - El texto de la noticia aqui - El texto de la noticia aqui - El texto de la noticia aqui - El texto de la noticia aqui - El texto de la noticia aqui - El texto de la noticia aqui - El texto de la noticia aqui - El texto de la noticia aqui - El texto de la noticia aqui - <a href="javascript:ocultar_noticia('not_oculta'); cerrar('contenedor_principal')" class="link_leermenos">cerrar</a>
</div><!--Final de la noticia oculta-->
<!--Final del contenedor de la noticia principal-->
</div>
<!--Fin de plantilla-->
<!--Plantilla de tarjeta de notcias-->
<div id="contenedor_principal2" class="contenedor_principal">
<div name="contenedor_fecha/titular">
<!--Principio del subcontenedor de la fecha-->
<div class="contenedor_fecha">
<div class="dia">dd</div>
<div class="mes">mm</div>
<div class="año">aaaa</div>
</div>
<!--Fin del subcontenedor de fecha-->
<!--Principio del subcontenedor de titulares-->
<div class="contenedor_titular">
<div class="titular">titular</div>
<div class="subtitular">subtitular</div>
</div><!--Fin subcontenedor del titular-->
</div>
<!--Final contenedor fecha/titular-->
<!--Principio contenedor de noticia-->
<div class="contenedor_noticia">
El texto de la noticia aqui - El texto de la noticia aqui - El texto de la noticia aqui - El texto de la noticia aqui - El texto de la noticia aqui - El texto de la noticia aqui - El texto de la noticia aqui - El texto de la noticia aqui - El texto de la noticia aqui - El texto de la noticia aqui - El texto de la noticia aqui - El texto de la noticia aqui - El texto de la noticia aqui - El texto de la noticia aqui - El texto de la noticia aqui - El texto de la noticia aqui - El texto de la noticia aqui - El texto de la noticia aqui - El texto de la noticia aqui - El texto de la noticia aqui - El texto de la noticia aqui - <a href="javascript:mostrar_noticia('not_oculta2'); ampliar('contenedor_principal2')" class="link_leermas">leer mas</a> </div>
<!--Resto de la noticia oculta-->
<div id ="not_oculta2" class="noticia_oculta" style="visibility:hidden">
El texto de la noticia aqui - El texto de la noticia aqui - El texto de la noticia aqui - El texto de la noticia aqui - El texto de la noticia aqui - El texto de la noticia aqui - El texto de la noticia aqui - El texto de la noticia aqui - El texto de la noticia aqui - El texto de la noticia aqui - El texto de la noticia aqui - El texto de la noticia aqui - El texto de la noticia aqui - El texto de la noticia aqui - El texto de la noticia aqui - El texto de la noticia aqui - El texto de la noticia aqui - <a href="javascript:ocultar_noticia('not_oculta2'); cerrar('contenedor_principal2')" class="link_leermenos">cerrar</a>
</div><!--Final de la noticia oculta-->
<!--Final del contenedor de la noticia principal-->
</div>
</body>