CODEWITHSUNDEEP
javascriptjqueryhtml
allen
allen

Reputation: 55

Why isnt my Jquery background image switching?

Heres my Jquery

$(".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"><span>-</span></a>
        </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 doesn't change back

Upvotes: 2

Views: 314

Answers (2)

gnarf
gnarf

Reputation: 106372

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.

Upvotes: 0

redsquare
redsquare

Reputation: 78677

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?

Upvotes: 1

Related Questions