<html>
<head>
<style><!--
.hmmessage P
{
margin:0px;
padding:0px
}
body.hmmessage
{
font-size: 10pt;
font-family:Tahoma
}
--></style>
</head>
<body class='hmmessage'><div dir='ltr'>Pop both anchors in there and do a show/hide. I think there's a toggle for hidden in there somewhere too.<br><br>RS<br><br><hr>Date: Wed, 22 Jun 2011 16:30:47 -0400<br>From: bobn@rogers.com<br>To: seaside@lists.squeakfoundation.org<br>Subject: [Seaside] jQuery toggle with a changing image<br><br><div>Hello,</div>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).<div>
<br></div><div>Here is what I'm doing now... ('entireContact' is a pre-formatted view of all contact fields in a contact list application).</div><div>I'd prefer a solution that does not use a server call, which the #html: method requires.</div>
<div><br></div><div>Thanks for any help,</div><div>Bob</div><div> </div><div><br></div><div><div>renderContactToggleOn: html</div><div><br></div><div><span class=ecxApple-tab-span style="white-space:pre">        </span>html div id: 'contactToggle'; with: [</div>
<div><span class=ecxApple-tab-span style="white-space:pre">                </span>self renderContactMoreOn: html].</div></div><div><br></div><div><br></div><div><div>renderContactMoreOn: html</div><div><br></div><div><span class=ecxApple-tab-span style="white-space:pre">        </span>html anchor </div>
<div><span class=ecxApple-tab-span style="white-space:pre">                </span>onClick: (</div><div><span class=ecxApple-tab-span style="white-space:pre">                        </span>html jQuery ajax script: [:s | </div><div><span class=ecxApple-tab-span style="white-space:pre">                                </span>s << (html jQuery id: 'entireContact') toggle: 0.3 seconds.</div>
<div><span class=ecxApple-tab-span style="white-space:pre">                                </span>s << (html jQuery id: 'contactToggle') load html: [:r | self renderContactLessOn: r]]);</div><div><span class=ecxApple-tab-span style="white-space:pre">                </span>title: 'Show all contact attributes'; </div>
<div><span class=ecxApple-tab-span style="white-space:pre">                </span>with: [html image url: TSwaFileLibrary / #morePng]. " + "</div></div><div><br></div><div><div><br></div><div>renderContactLessOn: html</div><div>
<br></div><div><span class=ecxApple-tab-span style="white-space:pre">        </span>html anchor </div><div><span class=ecxApple-tab-span style="white-space:pre">                </span>onClick: (</div><div><span class=ecxApple-tab-span style="white-space:pre">                        </span>html jQuery ajax script: [:s | </div>
<div><span class=ecxApple-tab-span style="white-space:pre">                                </span>s << (html jQuery id: 'entireContact') toggle: 0.5 seconds.</div><div><span class=ecxApple-tab-span style="white-space:pre">                                </span>s << (html jQuery id: 'contactToggle') load html: [:r | self renderContactMoreOn: r]]);</div>
<div><span class=ecxApple-tab-span style="white-space:pre">                </span>title: 'Hide contact attributes'; </div><div><span class=ecxApple-tab-span style="white-space:pre">                </span>with: [html image url: TSwaFileLibrary / #lessPng]. " - "</div>
<div><br></div></div>
<br>_______________________________________________
seaside mailing list
seaside@lists.squeakfoundation.org
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside                                            </div></body>
</html>