Reset CSS background image

Question

I'm trying to create an accordion type menu using the following JQUERY:

function initMenu() {
 $('#menu ul').hide();
  $('#menu li a').click(
   function() {
    $(this).next().slideToggle('normal');
    $(this).css("background", "url(customnav_selected.png) top right");
   }
  );
}
$(document).ready(function() {initMenu();});

This works to a point, when i click the menu link it expands and the menu header background changes.

However I want it to change back when I click it for a second time to collapse the menu.

Can anyone help?

Answer 1

Instead of this:

$(this).css("background", "url(customnav_selected.png) top right");

Put that style into a CSS class, and use toggleClass instead of css, e.g.:

$(this).toggleClass("selected"); //assuming a class of .selected

so the click handler becomes:

$('#menu li a').click(function() {
     $(this).next().slideToggle('normal');
     $(this).toggleClass("selected");
});

and the style:

<style>
.selected  {background: url(customnav_selected.png) top right} 
</style>

Answer 2

Set background-image to none (or to the initial value).

I find it easier to set classes to specific html elements than css properties directly, then add / remove these classes.

Answer 3

Setting the background style to an empty string should revert it to the style inheriented from the style sheet. This assumes that the default style is from a style sheet, if it isn't you'll have to reset it manually.