I'm using this jQuery to hide a DIV:

$("#slider").click(function() {
    $(".help").slideToggle();
    $("#wrapper").animate({ opacity: 1.0 },200).slideToggle(200, function() {
    $("#slider a").text($(this).is(':visible') ? "Hide" : "Show");
    });
});

Instead of altering the text show I want to display a graphic, I want the grpahic to change based on the .toggle

Current HMTL:

<div id="wrapper">
  LI ITEMS
</div>

<div class="help">
  IMAGE
</div>

<div id="slider">
  <a href="#">Hide</a>
</div>

I'd like to add two images into .slider, removing the <a>:

<div id="slider">
<img class="show" title="Hide" alt="Hide" src="images/showbutton.png" />
<img class="hide" title="Hide" alt="Hide" src="images/hidebutton.png" />
</div>

Perhaps I can use css to hide the 'hide' button, then switch that using jquery in some way?

Any suggestions?