[jQuery] toggle expand/retract images on click
I'd like to display a "retract/close" image for div's that are open.
Current toggle code:
$(document).ready(function() {
$('#details').hide();
$('a.comment').click(function() {
var id = $(this).attr('id');
$('#details' + id).toggle(500);
// alert(id);
return false;
});
});
On click event tied to:
<a href="##" id="#randID#" class="comment"><img src="../assets/images/
common/btn_productDetails_open.gif"></a>
<div id="details#randID#" style="display:none"></div>
Default is a hidden <div> with a "+" image in the link. When the div
is toggled as visible I want the image to change to "-". I'm thinking
it may be better to use 'prepend' to assign image based on toggle
value, but I can't quite wrap my head around that route.
Any ideas would be most appreciated!