Is there a way to hide the image after clicking it and display it when clicking again?

Question

I have an image overlaying an object. I want to click and hide it, show the object (360 virtual tour), and then if the virtual tour is clicked, show the exact same image.

<img src="https://i.ibb.co/ZBkxZHW/360-overlay-white.png" onclick="this.style.display='none';" style="position:absolute;opacity:;left:0%;top:0%;width:100%;height:400px;margin-left:0px;margin-top:0px;z-index:100;" />

<object scrolling="no" data="https://via.placeholder.com/400" width="100%" height="400" type="text/html">
</object>

Answer 1

I'm not sure what hiding behavior you want, but if space should be preserved in the page, you can toggle the visibility attribute.

You can do this using event listeners instead of inline JavaScript. Also note that the object does not have a click event, so we put it on a wrapper and disable the click event on the object. See How to bind a click event to an object tag? . < /p>

document.querySelector('.img-thumb').addEventListener('click', event => {
  event.currentTarget.style.visibility = 'hidden';
  document.querySelector('.obj-wrapper').style.visibility = 'visible';
});

document.querySelector('.obj-wrapper').addEventListener('click', event => {
  event.currentTarget.style.visibility = 'hidden';
  document.querySelector('.img-thumb').style.visibility = 'visible';
});

.img-thumb {
  position: absolute;
  opacity: ;
  left: 0%;
  top: 0%;
  width: 100%;
  height: 400px;
  margin-left: 0px;
  margin-top: 0px;
  z-index: 100;
}

.obj-wrapper {
  visibility: hidden;
}

.obj-wrapper object {
  pointer-events: none;
}