0

Tengo varios enlaces (y se van agregando mas con el tiempo), cada uno me debe mostrar un div diferente con su respectivo contenido y la opcion de cerrarlo. Para un solo div me funciona, necesito de su ayuda para lograr poder abrir mas de uno, sin tener en cuenta la cantidad, ya que se va a ir agregando nuevo contenido, y nunca se muestran 2 divs a la vez.

Este es el codigo del enlace que muestra el div oculto

<a href="#" onclick="mostrarVersiculo();">2 Pedro 3, 8</a>

y el codigo javascript

<script type="text/javascript">
function mostrarVersiculo() {
  var x = document.getElementById("versiculo");
  if (x.style.display === "block") {
    x.style.display = "none";
  } else {
    x.style.display = "block";
  }
}
</script>

Luego tengo el div con el contenido a mostrar y su enlace para cerrar

<div id="versiculo" style="display:none">
CONTENIDO DEL DIV
<a href="#" onclick="cerrarversiculo('versiculo');">Cerrar DIV</a>
</div>

Y el javascript para cerrar el div

    <script type="text/javascript">
function cerrarversiculo(versiculo) {
    var e = document.getElementById('versiculo');
          e.style.display = 'none';
   }
</script>

Lo que necesito es hacer eso pero que me funcione con varios enlaces a medida que los vaya agregando. Como ven, tengo poco conocimiento, y uso javascript.

Muchas gracias

1 respuesta 1

0

¿Todos los divs tienen la misma id? Cada id debe ser única. Si querés que varios elementos compartan un mismo identificador tendrías que usar class='versiculo'. Te muestro un ejemplo de cómo podrías solucionarlo. Otra manera sería haciendo que cada div tenga una id única y que se envíe esa id al llamar la función.

<div>
  <a href="#" onclick="mostrarVersiculo(event);">2 Pedro 3, 8</a>
  <div class="versiculo" style="display: none;">
    CONTENIDO DEL DIV1
    <!-- se envía la variable global `event` para saber qué elemento disparó el evento -->
    <a href="#" onclick="cerrarversiculo(event);">Cerrar DIV</a>
  </div>

  <a href="#" onclick="mostrarVersiculo(event);">2 Pedro 3, 9</a>
  <div class="versiculo" style="display: none;">
    CONTENIDO DEL DIV2
    <a href="#" onclick="cerrarversiculo(event);">Cerrar DIV</a>
  </div>
</div>

<script type="text/javascript">
  function mostrarVersiculo(e) {
    // elem == elemento clickeado
    var elem = e.target;
    // vers == elemento que se encuentra después de elem
    var vers = elem.nextElementSibling;
    // (no debería haber ningún elemento entre el que llama a mostrarVersiculo
    // y el que contiene al que llama a cerrarversiculo para que funcione)
    if (vers.style.display === "block") {
      vers.style.display = "none";
    } else {
      vers.style.display = "block";
    }
  }

  function cerrarversiculo(e) {
    var elem = e.target;
    // parent == elemento que contiene al elemento que llamó a la función
    var parent = elem.parentElement;
    parent.style.display = 'none';
  }
</script>
1
  • 1
    Perfecto. Me funciono tal cual yo queria. Muchas gracias Commented el 15 jul. 2021 a las 3:53

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.