Is there a way to hide an image on click and show if clicked again?

Question

I have an image overlaying an object. I want that to be clicked and hide, show the object (360 virtual tour) then if clicked on the virtual tour, 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

#toggle:checked~.control-me {
  display: none;
}

label {
  background: black;
  color: white;
  padding: 0.5rem 1rem;
  cursor: pointer;
}

.visually-hidden {
  position: absolute;
  left: -100vw;
}

<div>
  <label for="toggle">Click me</label>
  <input type="checkbox" id="toggle" class="visually-hidden">

  <div class="control-me">
    <object scrolling="no" data="https://via.placeholder.com/200" width="100%" height="400" type="text/html">
    </object>
  </div>
</div>

Answer 2

I'm not sure what hide behavior you want, but if the space should remain in the page you can toggle the visibility property.

You'd do this with event listeners rather than inline JavaScript. Also note that objects don't have a click event, so we'll put it on the wrapper and disable click events on the object. See How to bind click event to object tag?.

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;
}

<img src="https://i.ibb.co/ZBkxZHW/360-overlay-white.png" class="img-thumb" />

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