JSFiddle - React, Tailwind, and code Playground
HTML
<body>
<header> <a onclick="showdiv('camera');">
<img src="camera.png" /></a>
<a onclick="showdiv('bike');">
<img src="bike.png" /></a>
<a onclick="showdiv('baby');">
<img src="baby.png" /></a>
</header>
<div id="camera" style="display: none;">
<img src="camera1.jpg" />
</div>
<div id="bike" style="display: none;">
<img src="bike1.jpg" />
</div>
<div id="baby" style="display: none;">
<img src="baby1.jpg" />
</div>
</body>
CSS
img {
margin: 15px;
}
.camera {
display: none;
}
.bike {
display: none;
}
.baby {
display: none;
}
JavaScript
var _hidediv = null;
function showdiv(id) {
if (_hidediv) _hidediv();
var div = document.getElementById(id);
div.style.display = 'block';
_hidediv = function () {
div.style.display = 'none';
};
}