Tengo problemas con esta función de javascript: cuando hago el primer párrafo solo, funciona normalmente, pero cuando creo y ejecuto el segundo párrafo, la primera función de mostrar y ocultar (ACERCA DEL PROYECTO) alterna el texto para que aparezca en el segundo párrafo (dialogueOne). Intenté cambiar el nombre de las identificaciones y la función mostrar y ocultar y no funciona. Estoy ejecutando esto a través de Cargo Collective, las imágenes están alojadas a través de CC y, por lo tanto, se llaman imagen 4 e imagen 5. Un enlace a la página: https://alexabunnell.com/deathspins-spun
<script> function ShowAndHide() { var x = document.getElementById('didactic'); if (x.style.display == 'none') { x.style.display = 'block'; } else { x.style.display = 'none'; } } </script> <div onclick="ShowAndHide()"><h2>ABOUT THE PROJECT ︎︎︎</h2></div> <div id="didactic" style="display: block;">{image 4} </div> </div> <div grid-col="1" grid-pad="5"> </div> </div><div grid-row="" grid-pad="5" grid-gutter="10"> <div grid-col="1" grid-pad="5"></div> <div grid-col="11" grid-pad="5" class=""> <script> function ShowAndHide() { var y = document.getElementById('dialogueOne'); if (y.style.display == 'none') { y.style.display = 'block'; } else { y.style.display = 'none'; } } </script> <div onclick="ShowAndHide()">{image 5}</div> <div id="dialogueOne" style="display: block;"><div style="text-align: center"><h2>Text to be shown and hidden</h2></div></div></div></div>Tienes dos funciones, ambas llamadas ShowAndHide . La segunda declaración reemplaza a la primera, por lo que cada vez que la invoque obtendrá el comportamiento de la última.
Una solución sería pasar el ID como argumento a la función en lugar de codificarlo de forma rígida.
function ShowAndHide(id) { const element = document.getElementById(id); // …do whatever you need to do with element } <div onClick="ShowAndHide('someid')">…</div> <div onClick="ShowAndHide('someotherid')">…</div>