once clicked on one of the image it appears on the window with a close button.once closed any other image will appear on the screen.How to fix this?
Code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
*{margin:0px;padding:0px;}
#slider{
	width:100%;
	height:100px;
	border:1px solid black;
	position:absolute;
	top:0px;
}
#mainbox{
	position:relative;
	top:100px;
	height:460px;
	width:100%;
	opacity: .1;
	border:1px solid black;
	background-color:blue;
}
#img_container{
	width:600px;
	height:400px;
	position:absolute;
	margin-left:250px;
	border:1px solid black;
	top:100px;
	
}
#img_container img{
	width:600px;
	height:400px;
}
#slider img{
	height:100px;
	width:100px;
}
#close{
	width:150px;
	height:30px;
	background-color:blue;
	margin:0 auto;
	position:relative;
	top:60px;
	z-index:2000;
}
a{
	margin:0 auto;
	text-align:center;
	position:absolute;
	margin-top:5px;
	margin-left:50px;
	font-size:20px;
	text-decoration:none;
}
</style>

</head>

<body style="position:relative;">
<div id="mainbox"></div>
<div id="img_container"></div>
<div id="slider"></div>

<script>
var imag=["image1.jpg","image2.jpg","image3.jpg","image4.jpg","image5.jpg","image6.jpg","image7.jpg","image8.jpg","image9.jpg","image10.jpg"];
function loading(){

var images_slider=document.getElementById("slider");
var wdth=images_slider.offsetWidth;
var no_of_img=parseInt(wdth/(100) );
var i;
for(i=0;i<no_of_img;i++){
	images_slider.innerHTML += '<img src="'+imag[i]+'" id="' + i + '"  onclick="show(this.id);"/>';}
}

</script>
<script>loading();</script>
<script>
function show(i){
	var shw=document.getElementById("img_container");
	shw.innerHTML= '<img src="'+imag[i]+'" /><div id="close" onclick="clse();"><a href="#">close</a></div>';
}
</script>
<script>
function clse(){
	
var s=document.getElementById("img_container");
(s.style.display=="block")?[s.style.display="none"]:[s.style.display="block"];

}
</script>
</body>
</html>