I am working on a project with multiple div elements which need their background images to change upon clicking and revert back to the original image when clicked again. Below is the CSS code for one of the divs, including its Class and ID:
.tab_box
{
width:2%;
height:20%;
position:absolute;
left:100%;
}
#tab_box1
{
background:url('cars.png') no-repeat center center;
background-size:120%;
-moz-background-size:120%;
-o-background-size:120%;
-ms-background-size:120%;
}
There are 3 other divs using the same "class" but with different "id" attributes to assign unique background images.
I attempted to use toggleClass in jQuery/CSS to achieve this functionality, but it doesn't seem to work as expected:
.one
{
width:2%;
height:20%;
background:url('mots.png') no-repeat center center;
background-size:120%;
position:absolute;
left:100%;
}
<script>
$(document).ready(function(){
$('#tab_box1').click(function() {
$('#tab_box1'').toggleClass("one")
});
});
</script>
If you have any suggestions on what I might be doing wrong or any alternative methods to achieve the desired image switching behavior besides toggleClass, please let me know!