Toggling css styles with jquery

Toggling css styles with jquery

Hello,

I've just started using jquery today, so forgive me if this is staring me in the face or anything.

I'm using toggle() to open and close content sections, i want the link's background image im using to change depending on if the content is open or closed.

I've came close, it starts off closed with a down arrow gfx, and i've managed to make it change when its open to a up arrow gfx.

its getting it to change back to the downarrow upon closing where i'm a bit lost.

Jquery:
$(document).ready(function() {

$('.slider1').hide();

$('a.slider1b').click(function() {
$('.slider1').toggle(0);
$('a.slider1b').css("background-image", "url(img/up-arrow.gif)");
return false;
});

});


css:
.slider1b {width:772px; display:block; height:33px; background-image:url(img/down-arrow.gif);}


i tried affixing .toggle to the end of the jquery css line, but that didn't work, i also tried a very crude if statment but that broke everything.

if($('a.slider1b').css("background-image", "url(img/up-arrow.gif)")){$('a.slider1b').css("background-image", "url(img/up-down.gif)");}else{$('a.slider1b').css("background-image", "url(img/up-arrow.gif)");}


Any help would be much appreciated.

Thanks