Display image below original image onClick


I have an original image of a person, and then what I want to do is basically click the image, and below a price chart will pop out. so it is hidden until it is clicked, and then if it is clicked again, hide it. I have it set up right now where i can display text, but it isn’t really working, and there is no css. here it is:

<img onclick="changeText(1)" src="https://images.unsplash.com/photo-1497215728101-856f4ea42174?ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxfHx8ZW58MHx8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60">
<img onclick="changeText(2)" src="def.jpg">
<img onclick="changeText(3)" src="efg.jpg">

<script type="text/javascript">
    function changeText(val)

              para += "Image one was Clicked";
         else if(val==2)
             para += "Image Two was Clicked";

Can anyone help me please?


The easies way is to place an element like a <div> below the image that contains the price lsit or a etxt instead of an image.

Then hide the element with a class that contains display: none; as declaration. Use the onclick event on the image to toggle the class on/off to show/hide the element:

.hidden {
  display: none;

/* for stylign purpose only */
img {
  max-width: 30vw;
<img onclick="document.getElementById('image-label').classList.toggle('hidden')" src="https://images.unsplash.com/photo-1497215728101-856f4ea42174?ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxfHx8ZW58MHx8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60">
<div class="hidden" id="image-label">Random Content</div>

Answered By – tacoshy

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published