Search jQuery

jQuery Forum

Desired jQuery action works only once and never again. Is there something obvious that I'm missing?

in Using jQuery • 7 years ago

I'm trying to make a photo gallery from scratch. If one image is clicked, it should enlarge and all other disappear. If it's clicked again, everything goes back to normal(this one shrinks and others fade in). My code works, but only for one time. What is wrong with it? Is there something simple that I missed? Thank you for your help.

<!Doctype html>
<html>
<head>
<title>title</title>
<meta name="viewport" container="width=device-width, initial-scale=1.0">
</head>
<body>
<style>
body{
background-color: DarkBlue;
}
#header{
	width: 83%;
	height: 70px;
	background-color: blue;
	border: cyan solid 3px;
	border-radius:20px;
	position: relative;
	top: 20px;
	margin: auto;
}
p{
font-size:30px;
font-weight: bold;
color: yellow;	
position: relative;
right: -450px;
top: -8px;
}
#container{

    position: relative;
	width: 83%;
	height: 1000px;
	background-color: blue;
	top: 50px;
	margin: auto;
	border-radius: 3%;
	border: solid cyan 3px;
	
}
.img{
height: 150px;
width: 225px;
padding: 10px;
padding-top: 30px;
cursor: pointer;
}
.click{
height: 400px;
width: 600px;
position: relative;
right: -200px;
cursor: pointer;
}
	

li{
	display: inline-block;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
	$(".img").click(function(){
	console.log('img clicked');
	$(this).removeClass('img');
	$(this).addClass('click');
	$(".img").hide();
	
	
		
	});
	$('.click').click(function(){
	$(".img").show();
	console.log('hover clicked');
		$(this).removeClass('click');
		$(this).addClass('img');
	
		
	});

});



</script>
<div id="header">
<p>Popova Family Photos</p>
</div>
<div id="container">
<ul>
<li><img class="img" src="image1.jpg"/></li>
<li><img class="img" src="image1.jpg"/></li>
<li><img class="img" src="image1.jpg"/></li>
<li></li>
<li></li>
<li></li>
<li></li>




</ul>
</div>












</body>
</html>