Issue
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)
{
if(val==1)
{
para += "Image one was Clicked";
}
else if(val==2)
{
para += "Image Two was Clicked";
}
}
</script>Can anyone help me please?
Solution
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