I am attempting to create a clickable image that reveals a div when clicked. The catch is that the div can only be shown by clicking the image, not hidden again. Clicking on another image will replace the existing div with a new one.
I was able to achieve this using the following code:
function myFunction() {
document.getElementById("popis").innerHTML = "Hello World";
}
function myFunction2() {
document.getElementById("popis").innerHTML = "text";
}
function myFunction3() {
document.getElementById("popis").innerHTML = "Nejaky text ";
}img {
height: 150px;
}<img src="https://clipart.info/images/ccovers/1495916678star-png-red-small-alpha-transparent-image-clip-art.png" onclick="myFunction()"></button>
<img src="https://clipart.info/images/ccovers/1495916678star-png-red-small-alpha-transparent-image-clip-art.png" onclick="myFunction2()"></button>
<img src="https://clipart.info/images/ccovers/1495916678star-png-red-small-alpha-transparent-image-clip-art.png" onclick="myFunction3()"></button>
<div id="popis"></div>This code changes the text displayed when an image is clicked. However, I have been unable to make it work with divs. I want to include headings and text paragraphs within divs, not just standalone paragraphs. Ideally, I would like one div to be shown by default and then switched when clicking on another image.
Next, I need to integrate this functionality into WordPress. Fortunately, since I already have images and a div section set up, I believe implementing this code should be straightforward.
Although using toggle or arrays may be possible, I have struggled to make them work in this context recently. Nonetheless, I did manage to see some results while experimenting with these approaches.