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>

What "hide" behavior are you looking for? What have you tried? You're expected to make an attempt and show it here. Please see [ask] and take the [tour], then revise the snippet demo above with your code. — isherwood, Jan 13 '23 at 14:30
As for some general pointers in the right direction (since you're already half way there): Don't use inline CSS. Instead, create 2 CSS classes. One for the image element and one for "hiding" it. Then just create a Javascript function that toggles the hiding class on the image element. Have both the image and the object call that function on the click event listener and you have the basics working. — icecub, Jan 13 '23 at 14:38

score 1 · Answer 1 · answered Jan 13 '23 at 14:44

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>

score -1 · Answer 2 · edited Jan 13 '23 at 14:28

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

edited Jan 13 '23 at 14:28

isherwood

58,414
16
114
157

answered Jan 13 '23 at 14:25

Ali Haider

59
4

1

Answers should contain some explanation. See [answer]. – isherwood Jan 13 '23 at 14:29
You've removed the image element from the HTML. – isherwood Jan 13 '23 at 14:31
It's not exactly an answer to the question either. OP is asking for a way to have an image hide when clicked and showed when an object underneath it is clicked. Your answer doesn't do anything with an image being clicked, nor an object to show it again. Instead, it's just a checkbox. – icecub Jan 13 '23 at 14:32
yes i know but i just explain that this is possible with checkbox. – Ali Haider Jan 13 '23 at 14:38
1

So if you ask me how to make something red and I'll give you an answer as to how to make it green, that would be helpful to you? Don't get me wrong, I'm not trying to be an ass to you here or anything like that. But telling OP they can do something else instead isn't an answer to their question. At best, it's a comment. Until you're able to comment on questions, try to stick to actual answers. – icecub Jan 13 '23 at 14:41
I can understand but i can answer according to question and the question is Is there a way to hide an image on click and show if clicked again? – Ali Haider Jan 13 '23 at 14:43
That's the question title. If you read the question body: _"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."_, you'll notice: I have an image overlaying -> I want that to be clicked and hide. You'll also notice: If clicked -> on the vitual tour -> Show image. – icecub Jan 13 '23 at 14:46
Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – 3ddavies Jan 15 '23 at 05:31

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

2 Answers2