Thanks to both Wizzud & Stephan, I think I now have it working as I
want.
Using an extra div with background images, works for me in firefox on
linux, if anyone reading this on another platform/browser spots any
problems, please let me know.
Of if anyone needs help with the same solution, I will do what I can
to help.
You can see it working here: http://propertyireland.net
On Sep 13, 4:32 pm, Wizzud <[EMAIL PROTECTED]> wrote:
> As an example:
>
> CSS
> img.showhide {width:12px; height:12px; background:#ffffff
> url('hide.jpg') no-repeat;} // if DIV is currently NOT hidden
> img.showhideShow {background-image:url('show.jpg');} // if DIV is
> currently hidden
>
> or you can put both the show and hide images in the same graphic jpg
> file and just change the background offset.
>
> SCRIPT (doesn't need to be constructed by php)
> $(document).ready(function(){
> $('img.showhide').click(function() {
> $('#' + this.id.substr(10)).toggle('slow');
> $(this).toggleClass('showhideShow');
> });
>
> });
>
> HTML (from php)
> // for each property_id...
> <img class="showhide" id="showhide_cat_<?php echo $property_id; ?>"
> src="blank.gif" alt="" title="" />
>
> Note that the script and html are slightly different, in that the
> script only needs the one click handler regardless of property id,
> because it extracts the id of the div to hide/show from its own id.
> I've used the id, but you can use something else, like the title or
> alt, if it suits.
> I've also removed the anchor - you don't need to if you wish. You can
> put the anchor back and run the click handler off that instead.
>
> On Sep 13, 2:57 pm, Stephan Beal <[EMAIL PROTECTED]> wrote:
>
> > On Sep 13, 2:33 pm, "[EMAIL PROTECTED]" <[EMAIL PROTECTED]>
> > wrote:
>
> > > what i'd like to do is change the (x) link to an image which changes
> > > when that div is hidden.
> > > you can see it in action here:http://propertyireland.net
> > > any ideas?
>
> > One approach is not to use a text (x), but to use an image and add/
> > remove a given CSS class to the header bar. The CSS class can define a
> > different background image for the opened and close states. An example
> > of this can be seen here:
>
> >http://wanderinghorse.net/computing/javascript/jquery/togglepane/demo...
>
> > Look at the third example (with red header bars). When opening/closing
> > those (clicking on the headers), the different graphic is controlled
> > by a CSS class change.
