CODEWITHSUNDEEP
jquery
Lucky500
Lucky500

Reputation: 507

Switch on/off using jquery show() and hide()

I have been trying to get this to work, to make the effect of an off/on switch, how to best get this result? is any method better than the other? toggle? or something else.

I tried to add a snippet here, but unfortunately the image is not showing... I have my code on git, if you care to look... http://lucky500.github.io/challenge5/

I understand that might css might not be right as well, I believe both images should occupy the same space, and one of the images should be set to display: none... but I can't get it to work.

$(document).ready(function(){
	console.log("Hello from jQuery!");
$('.switch').on('click', function(){
	$('.night').hide();
	$('.day').show;
})
$('.switch').on('click', function(){
	$('.night').show();
	$('.day').hide();
});

});
.switch {
	z-index: 1;
	float: right;
}

.day {
	display: none;
	background: url(http://imgur.com/KsK0GCt);
}

.night {
	background: url(http://imgur.com/os0mgek);
}

.night, .day {
	height: 332px;
	width: 225px;
	float: right;
	background-repeat: no-repeat;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="switch">
		<div class="day"></div>
		<div class="night"></div>
	</div>

Upvotes: 1

Views: 1985

Answers (1)

Roko C. Buljan
Roko C. Buljan

Reputation: 206078

jsBin demo

$(document).ready(function(){
  
  $('.switch').on('click', function(){
    $('.night, .day').toggle();
  });

});
.switch {
  z-index: 1;
  float: right;
}
.day {
  display: none;
  background: url(http://i.imgur.com/KsK0GCt.png);
}
.night {
  background: url(http://i.imgur.com/os0mgek.png);
}
.night, .day {
  height: 332px;
  width: 225px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="switch">
  <div class="day"></div>
  <div class="night"></div>
</div>

Upvotes: 2

Related Questions