Thanks to Stephan & Wizzud for both answers.
I think I have it figured out now, atleast it looks ok & works fine
for me in firefox on linux, if anyone reading this on any other
platform/browser can let me know if you are seeing any problems, i'd
appreciate it.
I'm now using an extra div with backround images to toggle another
div,
if it works ok for you and you need the same solution, let me know and
I will be happy to help if I can.
You can see the working version on http://propertyireland.net
Thanks again,
Dave.
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.
