Duda en javascript/html/css

gorkamu89 · #1 (**permalink**) 30/03/2010, 03:21

Hola buenos dias a todos, veran estoy empezandoa aprender a implementar javascript dentro del html y css para darle mas vidilla a mis paginas web, estoy haciendo un sistema de noticias que consta de varios divs, en los divs hay un enlace "leer mas" en el que mediante una funcion muestra mas contenido dentro del propio div y otro enlace de "cerrar" con su funcion de .style.visibility="hidden" que oculta esa informacion mostrada anteriormente, pues bien, estoy intentando hacer una unica funcion de mostrar y otra de ocular para todo el conjunto de divs que seran las diferentes noticias pero no lo consigo,no se si me explico, para hacer posible esto tedria q hacer una funcion abrir/ocultar para cada div y lo que me gustaria seria una unica funcion "generalizada"¿? para todos los divs, les paso el codigo a ver si pueden ayudarme. un saludo y gacias.

Código HTML:

<script type="text/javascript">
function vernoticia(id, id2, id3, id4){
	document.getElementById("id").style.visibility="visible";
	document.getElementById("id2").style.visibility="hidden";
	document.getElementById("id3").style.height="auto";
	document.getElementById("id4").style.visibility="visible";
	}
function cerrarnoticia(){
	document.getElementById("id").style.visibility="hidden";
	document.getElementById("id2").style.visibility="visible";
	document.getElementById("id3").style.height="110";
	document.getElementById("id4").style.visibility="hidden";
	}
</script>
</head>

<body>
<div class="conte_notprin">
    <div class="conte_notprin_fecha">
<ul>
       	  <li>dd</li>
       	  <li>mm</li>
       	  <li>aaaa</li>
      </ul>
    </div>
   	<div class="conte_notprin_titu">
       	<ul>
        	<li>titulo uno uno</li>
            <li>categoria dos dos</li>
          	<li>autor tres tres</li>
        </ul>
   	</div>
    <div class="conte_notprin_not" id="id3">
    	<div class="lovisto_not"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;moominfs nosidfnosd hoiasdaosd sadhoiuasd 			noiasdonasdnasdn asdmpoidasnlknsad  noisadoijsad joiasdhoidea giasd noq pjsdan nbsad huasd oijasdoij asdjoiasdoiw sad huawdjo sadjioahsd nuinasdhasdkpkasdnknsad`po joiasd niasdnoa noidnasmpasd mpasd<br />
        	<a href="#" onclick="vernoticia()" id="id2">leer mas</a>
        </div>
<div class="loescondido_not"><span id="id"  style="visibility:hidden">
        	<ul>
            	<li><a href="#"><img style="border:0" src="imagenes/facebook.png" alt="facebook"/></a></li>
                <li><a href="#"><img style="border:0" src="imagenes/lastfm.png" /></a></li>
                <li><a href="#"><img style="border:0" src="imagenes/twitter.png" /></a></li>
            </ul>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sasenos noidaskdlnasdasdjoadsoisjdojasd noasdonasd noiasdlkn nsadn joiasd asd moominfs nosidfnosd hoiasdaosd sad hoiuasd 			noiasdonasdnasdn asdmpoidasnlknsad  noisadoijsad joiasdhoidea giasd noq pjsdan nbsad huasd oijasdoij asdjoiasdoiw sad huawdjo sadjioahsd nuinasdhasdkpkasdnknsad`po joiasd niasdnoa noidnasmpasd mpasd dashiouasdho hohasd nojhiasde az dasdaasdasd joiawd <br /> <a href="#" onclick="cerrarnoticia()"><span id="id4">cerrar</span></a></span></div>
  </div>
</div>

<div class="conte_notprin">
    <div class="conte_notprin_fecha">
<ul>
       	  <li>dd</li>
       	  <li>mm</li>
       	  <li>aaaa</li>
      </ul>
    </div>
   	<div class="conte_notprin_titu">
       	<ul>
        	<li>titulo uno uno</li>
            <li>categoria dos dos</li>
          	<li>autor tres tres</li>
        </ul>
   	</div>
    <div class="conte_notprin_not" id="id3">
    	<div class="lovisto_not"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;moominfs nosidfnosd hoiasdaosd sadhoiuasd 			noiasdonasdnasdn asdmpoidasnlknsad  noisadoijsad joiasdhoidea giasd noq pjsdan nbsad huasd oijasdoij asdjoiasdoiw sad huawdjo sadjioahsd nuinasdhasdkpkasdnknsad`po joiasd niasdnoa noidnasmpasd mpasd<br />
        	<a href="#" onclick="vernoticia()" id="id2">leer mas</a>
        </div>
<div class="loescondido_not"><span id="id"  style="visibility:hidden">
        	<ul>
            	<li><a href="#"><img style="border:0" src="imagenes/facebook.png" alt="facebook"/></a></li>
                <li><a href="#"><img style="border:0" src="imagenes/lastfm.png" /></a></li>
                <li><a href="#"><img style="border:0" src="imagenes/twitter.png" /></a></li>
            </ul>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sasenos noidaskdlnasdasdjoadsoisjdojasd noasdonasd noiasdlkn nsadn joiasd asd moominfs nosidfnosd hoiasdaosd sad hoiuasd 			noiasdonasdnasdn asdmpoidasnlknsad  noisadoijsad joiasdhoidea giasd noq pjsdan nbsad huasd oijasdoij asdjoiasdoiw sad huawdjo sadjioahsd nuinasdhasdkpkasdnknsad`po joiasd niasdnoa noidnasmpasd mpasd dashiouasdho hohasd nojhiasde az dasdaasdasd joiawd <br /> <a href="#" onclick="cerrarnoticia()"><span id="id4">cerrar</span></a></span></div>
  </div>
</div>
</body>