Here is a jsfiddle file provided for your reference.
I am attempting to create a functionality where upon clicking buttons (1,2,3,4), the corresponding image shows up and overlaps with any previously displayed images. I have tried using the following code:
$('#showButton').click(function() {
$('#img3').show();
return false;
});
However, this approach does not seem to be working as intended.
Is there a way to specify that when clicking a particular button, show #img1 and subsequently, when another button is clicked, have #img2 overlap that image?
Thank you in advance for your assistance!
HTML
<h1>Question goes here</h1>
<button onclick="picture()">1</button>
<button onclick="picture()">2</button>
<button onclick="picture()">3</button>
<button onclick="picture()">4</button>
<button onclick="picture()">5</button>
<br>
<br>
<br>
<h1>Another question here</h1>
<button onclick="picture()">1</button>
<button onclick="picture()">2</button>
<button onclick="picture()">3</button>
<button onclick="picture()">4</button>
<button onclick="picture()">5</button>
<br>
<br>
<br>
<!-- Images Section -->
<img src="line-01.png" id='img1'>
<img src="line-02.png" id='img2'>
<img src="line-03.png" id='img3'>
<img src="line-04.png" id='img4'>
<img src="line-05.png" id='img5'>
<img src="line-06.png" id='img6'>
<img src="line-07.png" id='img7'>
<img src="line-08.png" id='img8'>
<img src="line-09.png" id='img9'>
CSS
img {/* display:none;
position:absolute;
width:200px;*/
}