CODEWITHSUNDEEP
jqueryhtmlcss
Cross Vander
Cross Vander

Reputation: 2157

JQuery on Click for CSS not working

I have JQuery code to change a css of ID. If I use event hover, it runs well. But when I change it to a click event, it doesn't work, there is even nothing showing up in the console log. I have created a snippet here:

$(document).ready(function(){
	$("#donatenow").click(function(){
	console.log("klik klik");
		$("#subdonate").show();
		}, function(){
		$("#subdonate").hide();
	});
});
.subdonate{
	float:left;
	margin-top:-45px; 
	display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<img src="http://buymebook.com/assets/cat/School%20and%20College%20Text%20Books.jpg" style="margin:20px;" class="promo3" id="donatenow" /><br />
			<div class="subdonate" id="subdonate">
				<a href="#"><img src="http://p3cdn4static.sharpschool.com/UserFiles/Servers/Server_1110080/Image/books.jpg" style="margin:20px;" class="promo3" /></a><br />
				<a href="#"><img src="http://p3cdn4static.sharpschool.com/UserFiles/Servers/Server_1110080/Image/books.jpg" style="margin:20px; margin-top:-25px;" class="promo3" /></a>
			</div>

Does anyone know why my jquery fails? What I want is, when I click the first image, the second and third image show up, but when I click again, the second and third image will hide again.

Upvotes: 0

Views: 51

Answers (1)

Sam Teng Wong
Sam Teng Wong

Reputation: 2439

Try this one.

here's an example: http://jsfiddle.net/aqm7kjbg/4/

just change your jquery.

var count = 1;
$("#donatenow").click(function(){

    if(count % 2){
        $("#subdonate").show();
        count = count + 1;
    }else{
       $("#subdonate").hide();
        count = 1;
    }

});

Upvotes: 1

Related Questions