[Seaside] jQuery toggle with a changing image

[Bob N.]

Hello,
I'm using a jQuery ajax script to toggle the display of a component. The
anchor is initially displayed with a '+' png image. When clicked the hidden
div is toggled and the anchor image is changed to a '-'. My code works, but
I suspect it is not elegant. What I'd like to do to change the anchor image
on each click (and the title), rather than the component replacement I'm
doing now.  I tried toggling the class of the anchor div to show different
background images, but I could not get that to work (it feels like it should
be easy).

Here is what I'm doing now... ('entireContact' is a pre-formatted view of
all contact fields in a contact list application).
I'd prefer a solution that does not use a server call, which the #html:
method requires.

Thanks for any help,
Bob


renderContactToggleOn: html

html div id: 'contactToggle'; with: [
self renderContactMoreOn: html].


renderContactMoreOn: html

html anchor
onClick: (
html jQuery ajax script: [:s |
s << (html jQuery id: 'entireContact') toggle: 0.3 seconds.
s << (html jQuery id: 'contactToggle') load html: [:r | self
renderContactLessOn: r]]);
title: 'Show all contact attributes';
with: [html image url: TSwaFileLibrary / #morePng].  " + "


renderContactLessOn: html

html anchor
onClick: (
html jQuery ajax script: [:s |
s << (html jQuery id: 'entireContact') toggle: 0.5 seconds.
s << (html jQuery id: 'contactToggle') load html: [:r | self
renderContactMoreOn: r]]);
title: 'Hide contact attributes';
with: [html image url: TSwaFileLibrary / #lessPng].  " - "
-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://lists.squeakfoundation.org/pipermail/seaside/attachments/20110622/0068c8f3/attachment.htm