When I click on it changes background. It works fine. But what if I want to click on it again to restore the original background? I have this code:

jQuery(document).ready(function($) {
    $(".select").on("click", function () {
        $(this).css("background-image", "url(images/selected.png)");
    });
});

Here is jsfiddle EXAMPLE

Basically when I click on the div it changes the background, which is fine. But I want to have ability to click on it again to restore the original background. It will be an alternative solution for tick box, but just for demo purposes.

Thanks

When I click on it changes background. It works fine. But what if I want to click on it again to restore the original background? I have this code:

jQuery(document).ready(function($) {
    $(".select").on("click", function () {
        $(this).css("background-image", "url(images/selected.png)");
    });
});

Here is jsfiddle EXAMPLE

Basically when I click on the div it changes the background, which is fine. But I want to have ability to click on it again to restore the original background. It will be an alternative solution for tick box, but just for demo purposes.

Thanks

• javascript
• jquery
• html
• css

• 1 much simpler to toggle a class that contains css rule, much easier to undo – charlietfl Commented Jan 7, 2015 at 16:33

4 Answers 4

JS

replace

$(this).css("background-image", "url(images/selected.png)");

with

$(this).toggleClass("active");

Style

#multiselect .active {
    background-image: url('...');
}

Fiddle http://jsfiddle/09xgrhxo/4/

Instead of using .css() to change the background-image I would add a class in your CSS and use .toggleClass().

Also be aware that simply adding a class will not be specific enough because your css is using:

#multiselect .select 

you're going to have to target the class you add as a child of #multiselect:

#multiselect .change

CSS

#multiselect .change{
   background-image: url(http://t2.gstatic./images?q=tbn:ANd9GcSZ51HqKXkejWAFcSBrodHd5eUN2QaIJro0jhN1YpmljSdQ5dj2)
}

JS

$(".select").on("click", function () {
    $(this).toggleClass("change");
});

FIDDLE

You could use data-* attribute.

$('.select').attr('data-img', $('.select').css('background-image'));
$(".select").on("click", function() {
  $(this).css("background-image", ($(this).css('background-image') == $(this).data('img')) ? "url(http://t2.gstatic./images?q=tbn:ANd9GcSZ51HqKXkejWAFcSBrodHd5eUN2QaIJro0jhN1YpmljSdQ5dj2)" : $(this).data('img'));
});

#multiselect .select {
  background: url(http://t0.gstatic./images?q=tbn:ANd9GcQF_ErOlc78eOGZaEWb-dwPkrv2uyAoKx0Pbn3-e0tAZoUDSQRCsA) center;
  width: 250px;
  height: 100px;
  margin-bottom: 20px;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="multiselect">
  <div class="select">Option1</div>
  <div class="select">Option2</div>
  <div class="select">Option3</div>
</div>

Instead of writing background-img url in javascrpt, I would suggest to create two classes having same properties but different background-img url which you want to toggle. so here we will be toggling class (ultimately background-img) in javascript.

see jsfiddle [example][1]

 [1]: http://jsfiddle/09xgrhxo/13/