Set css background image with jQuery

Question

Trying to toggle between two images when clicking on a heading. For starters, I haven't even been able to get them to show. Any ideas?

<h2 class="expand" id="content-1" style="cursor:pointer;" value="One">Click to expand One</h2>
<h2 class="expand" id="content-2" style="cursor:pointer;" value="Two">Click to expand Two</h2>

Tried below but nothing so far.

 $('.expand').on('click', function() {
              if($(this).text().indexOf('expand') >0 )
              $(this).text('Click to collapse ' + $(this).attr("value"));
                $('.expand').css('background-image', 'url(' + img/arrow-up.gif + ')');
               else
                   $(this).text('Click to expand ' + $(this).attr("value"));
                 $('.expand').css('background-image', 'url(' + img/down-up.gif + ')');  
            });

and

$(this).text('Click to collapse ' + $(this).attr("value") + $(this).css...);

your image css is commented out. FYI, you'd typically handle this via an image sprite, then instead of swapping the CSS directly, just swap the class name that repositions the sprite. — DA.
– DA., Commented Feb 14, 2014 at 21:54
Now it's uncommented but you're trying to append a variable with the name of "img/arrow-up.gif". That won't work. It should all be just one string. — DA.
– DA., Commented Feb 14, 2014 at 21:56
@Diodeus syntax can still be the probelm. (' + img/arrow-up.gif + ') is correct? @DA fixed — user3191137
– user3191137, Commented Feb 14, 2014 at 21:56

Diodeus - James MacFarlane · Accepted Answer · 2014-02-14 21:58:18Z

1

Your easiest option is to switch class names and define the images in CSS.

$('.expand').toggleClass('someClass')


.someClass {
     background-image:url(...);
}

answered Feb 14, 2014 at 21:58

Diodeus - James MacFarlane

115k33 gold badges164 silver badges180 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

DA. · Accepted Answer · 2014-02-14 22:01:13Z

0

This:

 $('.expand').css('background-image', 'url(' + img/arrow-up.gif + ')');

Likely should be this:

 $('.expand').css('background-image', 'url("img/arrow-up.gif")');

But I'd second Diaodeus and that this should be spec'd in the CSS and your jQuery simply swapping class names. I'd also turn your images into a sprite so it's just one image.

answered Feb 14, 2014 at 22:01

DA.

40.8k51 gold badges162 silver badges219 bronze badges

Collectives™ on Stack Overflow

Set css background image with jQuery

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related