PDA

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



web.designer.iq
05-23-2009, 12:35 PM
1) Script Title:
Animated Collapsible DIV v2.2
2) Script URL (on DD):
http://www.dynamicdrive.com/dynamicindex17/animatedcollapse.htm
3) Describe problem:
I want to add "+" and "-" to the animated collapsible. Can anyone explain how can i add it?

ddadmin
05-24-2009, 04:36 PM
You'll need to utilize the ontoggle() event handler (http://www.dynamicdrive.com/dynamicindex17/animatedcollapse_suppliment.htm) 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>