Changing background image on accordion change - jQuery Ui

Question

I am using this code:

        $('.ui-accordion').bind('accordionchange', function(event, ui) {
            $(this).next().next().css({'background-image':'images/green-bg.jpg'});
        //ui.newHeader // jQuery object, activated header
  //ui.oldHeader // jQuery object, previous header
 // ui.newContent // jQuery object, activated content
 // ui.oldContent // jQuery object, previous content
});

To try to change the background image of the PREVIOUS header after it changes. I see that the jquery docs supply the object for oldHeader, but I am trying to change the CSS of that element. Any ideas how I would do that?

So You go to the next one it goes green, then the current one is going to be red.

Thanks,

Ryan

Answer 1

You just about have it. This works for me:

  $('#div0').bind('accordionchange', function(event, ui) {
      addMessage("change");
      if (typeof ui.oldHeader != "undefined") {ui.oldHeader.css({'background': 'Pink'});}
      if (typeof ui.oldContent != "undefined") {  ui.oldContent.css({'background': 'White'}); }
      if (typeof ui.newHeader != "undefined") {ui.newHeader.css({'background': 'Yellow'}); }
      if (typeof ui.newContent != "undefined") { ui.newContent.css({'background': 'LightGreen'}); }
  });

When I open a div, the header for the open div gets a yellow bg and the content gets a green bg. The just-closed header turns pink. You need to test for undefined because when closing a div and not opening another, the newHeader/Content is undefined. Likewise when opening a div, when previously all were closed, the oldHeader/Content is undefined.

working example: http://jsbin.com/arebi4/4

I figured this out by running the page in the debugger (either Firebug or IE8 F12 debugger works) and breaking in the accordionchange function.