How do i turn this into a toggle button? So that when the button is clicked, it toggles the light and dark background.

$(document).ready(function(){
   $("button").click(function(){
       $(".content1").css("background-image", "url(../images/light.png)");  
   });
});

CSS

.content1 {
background-image: url('../images/dark.png');
}

Thanks

How do i turn this into a toggle button? So that when the button is clicked, it toggles the light and dark background.

$(document).ready(function(){
   $("button").click(function(){
       $(".content1").css("background-image", "url(../images/light.png)");  
   });
});

CSS

.content1 {
background-image: url('../images/dark.png');
}

Thanks

• javascript
• jquery
• html
• css

• 2 toggle a class... – epascarello Commented Sep 8, 2016 at 14:23

1 Answer 1

Toggle a class instead of setting the background directly. It will be easier to maintain and to know what state the code is in.

$(document).ready(function() {
  $("button").click(function() {
    $(".content1").toggleClass("active");
  });
});

.content1 {
  background-image: url('../images/dark.png');
  background-color: red;
}
.content1.active {
  background-image: url('../images/light.png');
  background-color: green;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button>Clicky</button>
<div class="content1"> Hello </div>