Consulta - show/hide js

[elmono_xx]

Buenas, tengo una consulta.

Quiero usar en mi sitio , un show/hide . para mostrar ocultar contenido (tipo descripciones)

Hasta aqui todo perfecto.

El problema es cuando quiero usar el mismo script 2 o mas veces en la misma pagina, no logro que funcione correctamente.

les copio a continuacion el script . para ver si me dan una mano .

<script language="javascript">
function toggle() {
var ele = document.getElementById("toggleText");
var text = document.getElementById("displayText");
if(ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "show";
}
else {
ele.style.display = "block";
text.innerHTML = "hide";
}


</script>

y aqui el codigo html.

<a id="displayText" href="javascript:toggle();">show</a> <== click 1
<div id="toggleText" style="display: none"><h1>peek-a-boo</h1></div>

¿Como seria la forma correcta para usarlo 2 o mas veces?

[jp91]

Ps no te va a funcionar porque estas trabajando con los mismo id de los div, en tu ejemplo deberias pasar el id como parametro a la funcion toggle.

[elmono_xx]

Gracias, por responder. Claro necesito usar clases para llamar al metodo si no entiendo mal.. pero no sé como exactamente...

[Italico76]

Código Javascript:

<script> 
function toggle() 
{
  var ele = document.getElementsByClassName("toggleText");
  var text = document.getElementsByClassName("displayText");
 
  if(ele.style.display == "block")
  {
    ele.style.display = "none";
    text.innerHTML = "show";
  }else {
    ele.style.display = "block";
    text.innerHTML = "hide";
  }
} 
</script>
 
<a class="displayText" href="javascript:toggle();">show</a>
<div class="toggleText" style="display:none"><h1>peek-a-boo</h1></div>