Why isnt my Jquery background image switching?

Question

Heres my Jquery

$(document).ready(function(){
$('a.toggle').css('background-image','url(http://blah/resources/img/close.gif)');

$(".sectiontitle").click(function(e){
  $(this).next('div').slideToggle("slow");

  el = $(this).find(".toggler > a.toggle");

  currBg = el.css('background-image');
  if (currBg=="url(http://blah/resources/img/close.gif)"){
   currBg="url(http://blah/resources/img/open.gif)";
 console.log('open gif');
  }
  else{
   currBg="url(http://blah/resources/img/close.gif);"
 console.log('close gif');
  }
  console.log(currBg);
  el.css('background-image',currBg);

  return false;
});

});

Heres my html panel (of which there are many)

    <div class="majorsection">

    <div class="sectiontitle">
     <h2>Restaurant Bookings</h2>
     <div class="toggler">
      <a title="click to hide" class="toggle" href="http://blah/index.php/console/index"&gt;&lt;span&gt;-&lt;/span&gt;&lt;/a&gt;
     </div>
     <div class="clear"></div>
    </div>
    <div class="msectioninner">
<div class="minorsection">
    <div class="sectionlist">
        <div class="section"></div>
    </div>
    <div class="sectionoptions">
     <div class="clear"></div>
    </div>
</div>
    </div>
</div>

The image switches on the first click and the panel slides all cool both ways but the image doesnt change back

Answer 1

Why not use two css classes instead. It will make the code much cleaner and maintainable.

Failing that one thing to try is to change

.css('background-image', currBg)

to

.css('backgroundImage', currBg)

I remember there was an issue with this (but thought it had been fixed). If this does not work have you got a url showing the issue?

Answer 2

Have you tried console.log(currBg); right after you retrieve it? The url() property may be getting rewritten/resolved. Not sure - but a similar problem arises if you are testing the .attr('src') of an image - it might not be what you set it to anymore.

A suggestion though: Rather than hard coding the background-image values, consider doing something like:

$(document).ready(function(){
  $('a.toggle').addClass('closed');
  $(".sectiontitle").click(function(e){
    $(this).next('div').slideToggle("slow");
    el = $(this).find(".toggler > a.toggle");
    // jQuery 1.3 has this: 
    // el.toggleClass('.closed');
    // otherwise - use this:
    if (el.is('.closed'))
    {
      el.removeClass('closed');
    } else {
      el.addClass('closed');
    }
    return false;
  });
});

Then your a.toggle picks up the background-image property of the "open" and a.toggle.closed gets the "closed" image in your CSS files.