changing the content of div by click and change back another click - html

Question

I want to change the contents of a div using a button click and in another click I want to bring back the old contenns to div I am using a image for button...
My div code is below
<div class="pic-container" style="position:absolute; left: 3px; top: 102px;">
<div class="pic-row" >
<img src="images/A.Png" />
<img src="images/B.Png" />
<img src="images/C.Png" />
<img src="images/D.Png" />
<img src="images/E.Png" />
<img src="images/F.Png" />
<img src="images/G.Png" />
<img src="images/H.Png" />
<img src="images/I.Png" />
<img src="images/J.Png" />
<img src="images/K.Png" />
<img src="images/L.Png" />
<img src="images/M.Png" />
<img src="images/N.Png" />
<img src="images/O.Png" />
<img src="images/P.Png" />
<img src="images/Q.Png" />
<img src="images/R.Png" />
<img src="images/S.Png" />
<img src="images/T.Png" />
<img src="images/U.Png" />
<img src="images/V.Png" />
<img src="images/W.Png" />
<img src="images/X.Png" />
<img src="images/Y.Png" />
<img src="images/Z.Png" />
</div>
</div>
<img style="position:absolute; left: 272.5px; top: 647px; width: 171px; height: 122.5px;" src="images/Btn_Lower.png" id="image1" />
Please help me to solve this issue

Answer 1

I don't want to confuse you by solving your problem, instead I would like to give you a short and simple example.
You can't achieve it by only using HTML you need javascript. So here is a way.
1) When you say content, it is referred as innerHTML in javascript.
2) I think you know about onclick, it is called click event. Similar to that you have a lots of different events in javascript for keypress, doubleclick, etc.,
3) Hope you know ID, called as unique selector. Other selector like class and you can HTML5 data-attributes.
4) To select an element, in JS you can use different methods like,
document.getElementById // select element based on Unique ID
document.getElementsByClassName // select element based on class
document.getElementsByTagName // select element based on Tag name
If you're insterested to learn more about javascript refers Mozilla Developers Network
Here is the shot example I would like to present to you.
HTML:
<div id="divd">First</div>
<button onclick='changeMe()'>Click It</button>
JS:
function changeMe() {
var div = document.getElementById('divd').innerHTML;
if (div === 'First') {
document.getElementById('divd').innerHTML = "Second";
} else {
document.getElementById('divd').innerHTML = "First";
}
}
Demo