How Can i add "Minus" and "Plus" to the Animated Collapsible DIV v2.2?

[web.designer.iq]

1) Script Title:
Animated Collapsible DIV v2.2
2) Script URL (on DD):
http://www.dynamicdrive.com/dynamici...edcollapse.htm
3) Describe problem:
I want to add "+" and "-" to the animated collapsible. Can anyone explain how can i add it?

[ddadmin]

You'll need to utilize the ontoggle() event handler to expand the default behavior with this. There are a few ways to go about it, but one of it is first to give your toggler link(s) a unique ID in the form of divd plus "-toggler":

<a href="javascript:animatedcollapse.toggle('jason')" id="jason-toggler">Toggle Jason Content</a>

<div id="jason" style="width: 300px; background: #FFFFCC; display:none">
<b>Content inside DIV!</b><br />
<b>Note: Fade effect enabled. Height programmically defined. DIV hidden using inline CSS.</b><br />
</div>

Then up in your initialization code, define the ontoggle() event handler as follows:

<script type="text/javascript">

animatedcollapse.addDiv('jason', 'fade=1,height=80px')
animatedcollapse.addDiv('kelly', 'fade=1,height=100px')
animatedcollapse.addDiv('michael', 'fade=1,height=120px')

animatedcollapse.addDiv('cat', 'fade=0,speed=400,group=pets')
animatedcollapse.addDiv('dog', 'fade=0,speed=400,group=pets,persist=1,hide=1')
animatedcollapse.addDiv('rabbit', 'fade=0,speed=400,group=pets,hide=1')

animatedcollapse.ontoggle=function($, divobj, state){ //fires each time a DIV is expanded/contracted
	//$: Access to jQuery
	//divobj: DOM reference to DIV being expanded/ collapsed. Use "divobj.id" to get its ID
	//state: "block" or "none", depending on state
	if ($('#'+divobj.id+'-toggler').length==1){ //if toggler link has id 'divid-toggler' defined
		if (state=="block")
			$('#'+divobj.id+'-toggler').prepend('<span class="prefix">+ </span>')
		else
			$('#'+divobj.id+'-toggler').find('span.prefix').remove()
	}
}

animatedcollapse.init()

</script>