Q:

Adding a "background-image" change to existing jquery css change afterwards

I have a link which has...
a#popup { background:url(../popupopen.jpg) center right no-repeat #fff;

which toggles a menu position using...
jQuery(document).ready(function(){
jQuery('a#popup').toggle(function () {
jQuery("#wps-sidebar").css({left: "30px"});
}, function () {
jQuery("#wps-sidebar").css({left: "-240px"});
});
});

& I'm trying to add a simple background image change to the end of each, so that when it opens the background image changes to use popupclose.jpg (after the menu position toggle), & obviously back to popupopen.jpg once it's closed again.  I'm trying to copy existing examples but can't find anything that gets through to my js-inept brain, can someone please advise?
Thank you in advance.

A:

I applied the background to #wps-sidebar instead of a#popup, then...
#wps-sidebar.opened {
left: 30px;
background: url(../popupclose.jpg) center right no-repeat #fff;
}

...&...
jQuery(document).ready(function(){
jQuery('a#popup').toggle(function () {
jQuery("#wps-sidebar").addClass("opened");
}, function () {
jQuery("#wps-sidebar").removeClass("opened");
});
});

Thank you for the suggestion, just the brain-slap I needed. :)

