I am having trouble with this javascript function - when I do the first paragraph by itself it functions normally, but when I create and run the second paragraph, the first show and hide function (ABOUT THE PROJECT) toggles the text to appear on the second paragraph (dialogueOne). Tried renaming id's and the show and hide function and it's not working. I'm running this through cargo collective, the images are hosted through CC and so are called image 4 and image 5. A link to the page: 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>
You have two functions both named ShowAndHide. The second declaration replaces the first one, so any time you invoke it you’ll get the behavior of the latter one.
One solution would be to pass the ID in as an argument to the function instead of hard coding it.
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>