Ayuda con una función mostrar/ocultar en javascript.
Mi problema es acerca una función que he desarrollado en javascript para mostrar u ocultar un div. Mi idea es poner títulos de noticias y un enlace: "leer artículo" que al pulsarlo se muestra el texto de la noticia y el texto del enlace cambia de "leer artículo" a "Ocultar artículo". Al final de esta noticia, se mostrará otro enlace: "ocultar artículo" que al pulsarlo, ocultará la noticia. Si sólo tengo una noticia, no hay ningún problema, pero cuando pongo 2 o más, me ocurre lo siguiente. Por ejemplo, tengo 2 noticias, la primera bien, pero al pulsar sobre la segunda para mostrar el texto, cambia el texto del enlace de la primera noticia en lugar del de la segunda noticia.
No se si me he explicado bien, creo que si os copio el ejemplo, podréis saber mejor a qué me refiero.
<title>Muestra y oculta</title>
<script language="javascript">
function toggle(noticia) {
var ele = document.getElementById(noticia);
var text = document.getElementById("enlace");
if(ele.style.display == "block") {
ele.style.display = "none"; text.innerHTML = "Leer artículo";
} else {
ele.style.display = "block"; text.innerHTML = "Ocultar artículo"; }
}
</script>
<h2>TITULAR NOTICIA 1</h2>
<a id="enlace" href="javascript:toggle('noticia1');">Leer artículo</a>
<div style="display: none;" id="noticia1">
<p>Texto noticia 1. Texto noticia 1. Texto noticia 1. Texto noticia 1. Texto noticia 1. Texto noticia 1. Texto noticia 1. Texto noticia 1. Texto noticia 1. Texto noticia 1. Texto noticia 1. Texto noticia 1. Texto noticia 1. Texto noticia 1.Texto noticia 1. Texto noticia 1. Texto noticia 1. Texto noticia 1.</p>
<a id="enlace" href="javascript:toggle('noticia1');">[Ocultar artículo]</a> </div>
<h2>TITULAR NOTICIA 2</h2>
<a id="enlace" href="javascript:toggle('noticia2');">Leer artículo</a>
<div style="display: none;" id="noticia2">
<p>Texto noticia 2. Texto noticia 2. Texto noticia 2. Texto noticia 2. Texto noticia 2. Texto noticia 2. Texto noticia 2.Texto noticia 2. Texto noticia 2. Texto noticia 2. Texto noticia 2.Texto noticia 2. Texto noticia 2. Texto noticia 2. Texto noticia 2. </p>
<a id="enlace" href="javascript:toggle('noticia2');">[Ocultar artículo]</a>
</div>
Por favor, comprobar este código en el navegador y hacer pruebas, para saber a qué me refiero. Soy novata en javascript, pero me gustaría aprender mucho más, y vuestra ayuda es muy valiosa.
1 respuesta
y que tal asi:
<title>Muestra y oculta</title>
<script language="javascript">
function toggle(noticia, enlace) {
var ele = document.getElementById(noticia);
var text = document.getElementById(enlace);
if(ele.style.display == "block" ) {
ele.style.display = "none" ; text.innerHTML = "Leer artículo" ;
}
else {
ele.style.display = block ; text.innerHTML = "Ocultar artículo" ;
}
}
</script>
<h2>TITULAR NOTICIA 1</h2>
<div style="display: none;" id="noticia1">
<p>Texto noticia 1. Texto noticia 1. Texto noticia 1. Texto noticia 1. Texto noticia 1. Texto noticia 1. Texto noticia 1. Texto noticia 1. Texto noticia 1. Texto noticia 1. Texto noticia 1. Texto noticia 1. Texto noticia 1. Texto noticia 1.Texto noticia 1. Texto noticia 1. Texto noticia 1. Texto noticia 1.</p>
</div>
<a id="enlace1" href="javascript:toggle('noticia1', 'enlace1');">Leer artículo</a>
<h2>TITULAR NOTICIA 2</h2>
<div style="display: none;" id="noticia2">
<p>Texto noticia 2. Texto noticia 2. Texto noticia 2. Texto noticia 2. Texto noticia 2. Texto noticia 2. Texto noticia 2.Texto noticia 2. Texto noticia 2. Texto noticia 2. Texto noticia 2.Texto noticia 2. Texto noticia 2. Texto noticia 2. Texto noticia 2. </p>
</div>
<a id="enlace2" href="javascript:toggle('noticia2', 'enlace2');">Leer artículo</a>
Slds
Revisa las comillas que se pierden cuando pego el codigo
