Question

Can someone please help me understand why this code is not working?

$('#quick-search-header.widget-title').css('background-image', 'url(dd_includes/images/icons/sliding-menu-arrow-right.gif)');

I see through Firebug that the background-image has been removed entirely from #quick-search-header.widget-title, but the new background image above is added to element.style. Thanks.

HTML –

<div id="quick-search-header" class="widget-title">
    <p>Quick search results</p>
</div>

CSS –

#quick-search-header.widget-title{
    background: #C60B46 url(dd_includes/images/icons/sliding-menu-arrow-down.gif) right 3px no-repeat;
}

Full JS (with error code marked) –

$(document).ready(function(){

    $('input#s').val('');

    $('#quick-search-header.widget-title').live('click', function(){

        if($('#quick-search-content').hasClass('visible')){

            $('#quick-search-header.widget-title').css('background-image', 'url(dd_includes/images/icons/sliding-menu-arrow-right.gif)'); /** Not working */
            $('#quick-search-content').removeClass('visible')
            $('#quick-search-content').slideUp('600');

        } else {

            $('#quick-search-header.widget-title').css('background-image', 'url(dd_includes/images/icons/sliding-menu-arrow-down.gif)'); /** Not working */
            $('#quick-search-content').addClass('visible')
            $('#quick-search-content').slideDown('600');

        }

    });

});

Answer 1

Setting any value via the css('attributename','attributevalue') function in jQuery will add that attribute to the inline style of the element. In the inspector its often labeled element.style

If you need to do this via classes only then you can create a seperate class with the alternate background image in and switch classes by adding/removing classes from the element, this would not appear in the element.style, rather it would just switch the class and that would be displayed in the inspector instead.

You could even use the toggleClass() function which would allow you to toggle a particular or multiple classes on or off.

Docs are as follows:

toggleClass

addClass

removeClass

Or you could even do it by setting an attribute on the element using .attr('class','newClassName');

Up to you.