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.
