CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Piotr Ciszewski
Piotr Ciszewski

Reputation: 1791

click to change background toggle

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

Upvotes: 0

Views: 1578

Answers (4)

Code Lover
Code Lover

Reputation: 11

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.net/09xgrhxo/13/

Upvotes: 0

Weafs.py
Weafs.py

Reputation: 22992

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.com/images?q=tbn:ANd9GcSZ51HqKXkejWAFcSBrodHd5eUN2QaIJro0jhN1YpmljSdQ5dj2)" : $(this).data('img'));
});
#multiselect .select {
  background: url(http://t0.gstatic.com/images?q=tbn:ANd9GcQF_ErOlc78eOGZaEWb-dwPkrv2uyAoKx0Pbn3-e0tAZoUDSQRCsA) center;
  width: 250px;
  height: 100px;
  margin-bottom: 20px;
}
<script src="https://ajax.googleapis.com/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>

Upvotes: 1

Jack hardcastle
Jack hardcastle

Reputation: 2875

JS

replace

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

with

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

Style

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

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

Upvotes: 7

jmore009
jmore009

Reputation: 12923

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.com/images?q=tbn:ANd9GcSZ51HqKXkejWAFcSBrodHd5eUN2QaIJro0jhN1YpmljSdQ5dj2)
}

JS

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

FIDDLE

Upvotes: 3

Related Questions