You are on page 1of 6

//** Animated Collapsible DIV v2.

0- (c) Dynamic Drive DHTML code library: http:/
/www.dynamicdrive.com.
//** May 24th, 08'- Script rewritten and updated to 2.0.
//** June 4th, 08'- Version 2.01: Bug fix to work with jquery 1.2.6 (which chang
ed the way attr() behaves).
//** March 5th, 09'- Version 2.2, which adds the following:
//1) ontoggle($, divobj, state) event that fires each ti
me a DIV is expanded/collapsed, including when the page 1st loads
//2) Ability to expand a DIV via a URL parameter string,
ie: index.htm?expanddiv=jason or index.htm?expanddiv=jason,kelly
//** March 9th, 09'- Version 2.2.1: Optimized ontoggle event handler slightly.
//** July 3rd, 09'- Version 2.4, which adds the following:
//1) You can now insert rel="expand[divid] | collapse[di
vid] | toggle[divid]" inside arbitrary links to act as DIV togglers
//2) For image toggler links, you can insert the attribu
tes "data-openimage" and "data-closedimage" to update its image based on the DIV
state
var animatedcollapse={
divholders: {}, //structure: {div.id, div.attrs, div.$divref, div.$togglerimage}
divgroups: {}, //structure: {groupname.count, groupname.lastactivedivid}
lastactiveingroup: {}, //structure: {lastactivediv.id}
preloadimages: [],
show:function(divids){ //public method
if (typeof divids=="object"){
for (var i=0; i<divids.length; i++)
this.showhide(divids[i], "show")
}
else
this.showhide(divids, "show")
},
hide:function(divids){ //public method
if (typeof divids=="object"){
for (var i=0; i<divids.length; i++)
this.showhide(divids[i], "hide")
}
else
this.showhide(divids, "hide")
},
toggle:function(divid){ //public method
if (typeof divid=="object")
divid=divid[0]
this.showhide(divid, "toggle")
},
addDiv:function(divid, attrstring){ //public function
this.divholders[divid]=({id: divid, $divref: null, attrs: attrstring})
this.divholders[divid].getAttr=function(name){ //assign getAttr() functi
on to each divholder object
var attr=new RegExp(name+"=([^,]+)", "i") //get name/value confi
g pair (ie: width=400px,)
return (attr.test(this.attrs) && parseInt(RegExp.$1)!=0)? RegExp
.$1 : null //return value portion (string), or 0 (false) if none found
}
this.currentid=divid //keep track of current div object being manipulate
d (in the event of chaining)

divholders[divid] && $divref.lastactiv edivid!=divid) //if last active DIV is set this.lastactivedivid=divid //remember last active DIV } else{ this.css('display')) } catch(e){ alert("An error exists inside your \"ont oggle\" function:\n\n"+e+"\n\nAborting execution of function.ontoggle(jQuery.attr('groupname') && targetgroup. i++){ if (arguments[i][1]!=null){ //do not generate name/value pair if value is null map[arguments[i][0]]=arguments[i][1] } .divholders[divid].attr('fade')) animateSetting.attr('speed')? parseInt( $divref.divgroups[$divref. $divre f. slideengine:function(divid. generatemap:function(){ var map={} for (var i=0.count>1 && (action= ="show" || action=="toggle" && $divref.data('srcs'). function(){ if ($togglerimage){ $togglerimage. $divref.data('srcs'). showhide:function(divid.lastactivedivid.divholders[divid].open) } if (animatedcollapse.length==1){ //if DIV exists var targetgroup=this. action){ var $divref=this.opacity=action $divref.slideengine(divid. action) } } }.closed : $togglerimage.$togglerimage if (this. $divref. i<arguments.slideengine(targetgroup.divholders[divid] && $divref.ontoggle){ try{ animatedcollapse.attr('groupname')] //find out which group DIV belongs to (if any) if ($divref.animate(animateSetting.length. 'show') targetgroup.css('display' )=="none")? $togglerimage.length==1){ //if this DIV exists var animateSetting={height: action} if ($divref.attr('src'. ($divref. 'h ide') //hide last active DIV within group first this.attr('speed')) : 500.$divref var $togglerimage=this.css('display')=='none')){ //If current DI V belongs to a group if (targetgroup.$divref //reference collapsible DIV if (this.divholders[divid]. action){ var $divref=this.lastactivedivid && targetgroup.slideengine(divid.return this }.get(0).") } } }) return false } }.

or belong to a group with at least one div that does var cssdisplay=(jQuery.divgroups[this.getAttr('group')]={}) //Get settings for this group.id. ['display'.id.css(ac. this.getAttr('group ')] || (ac.urlparamselect() //Get div ids that should be expanded based on the url (['div1'.getAttr('speed')]) ) if (this.getAttr('persist') || jQuery.ready(function($){ animatedcollapse.split('.count=(targetgroup. this. ['speed'.generatemap(['groupname'. array of d iv ids groupswithpersist=(groupswithpersist==null || groupswithpersist= ='nada')? [] : groupswithpersist. create blank object to store them in targetgroup.attr(ac.ontoggle=animatedcollapse.'div2'.generatemap(['height'. this.split('. urlparamopenids)!=-1 ){ //if url parameter string contains this div's ID . init:function(){ var ac=this jQuery(document).inArray(this.divholders.$divref=$('#'+this. set to empty array. and cookie hasnt been set yet) persistopenids=(persistopenids=='nada')? [] : persistope nids. groupswithpersist)!=-1) && persistopenids!=null){ //if this div ca rries a user "persist" setting.etc]) var persistopenids=ac.$divref.inArray(this.getA ttr('group')]. this. cssdisplay])) this. persisto penids)!=-1)? 'block' : 'none' } else{ var cssdisplay=this.count||0)+1 //cou nt # of DIVs within this group if (jQuery.getCookie('acgroupswithpersist') //Get list of group names that have 1 or more divs with "persist" attribute defined if (persistopenids!=null) //if cookie isn't null (is null if fir st time page loads.inArray(this.getAttr('fade')].id) if ((this.getCookie('acopendivids') //Get list of di v ids that should be expanded due to persistence ('div1.ontoggle || null var urlparamopenids=animatedcollapse.} return map }. urlparamopenids)!=-1){ //if url parameter string contains the single array elem ent "all". o r if it no settings exist yet. function(){ //loop through each colla psible DIV object this.inArray(this. or this div's ID cssdisplay='block' //set div to "block". overridin g any other setting } this.getA ttr('group'). else.div2.id.etc') var groupswithpersist=ac.getAttr('group')){ //if this DIV has the "group " attr defined var targetgroup=ac.each(ac. overrid ing any other setting } else if (urlparamopenids[0]=="none"){ cssdisplay='none' //set div to "none". ['fade'.divgroups[this.') //Get list of groups with divs that are persisted jQuery.$divref.getAttr('hide')? 'none' : nu ll } if (urlparamopenids[0]=="all" || jQuery.getAttr( 'height')].') //if no divs are persisted.

lastactivedivid && this.ontoggle(jQuery.div2.lastactivedivid=this.eq(0).ontoggle){ jQuery.div2.getAttribute('rel').closed : $togglerimage.divholders[this.$divref.data('srcs'). this.etc] if (this. this.css('display')!='none' || cssdisplay=="block" && typeof targetgroup.lastactivedivid && urlparamopenids[0]!="none") //show last "active" DIV within each group (one that should be expanded). unless url param="none" ac. this.each(function(){ //loop though each control link this._divids=="")? [] : this.getAttribute('rel') var divids=(this.each(ac._divids]){ //if control is an image link that toggles a single DIV (must be one to one to update status image) animatedcollapse.length==1 && ac.g et(0)._divids].$divref .each jQuery.find('img').$togglerimage. Overrides other settings targetgroup. function(){ //loop through each group if (this.open) } $(this). "expand[]" and "toggle[]" $allcontrols.getAttribute('data-c losedimage')}) //remember open and closed images' paths ac._divids]. [rel^=" expand["].div holders[this. {open:this.getElementsByTagName('img').css({display:'none'}) //hide any DI V that's part of said group for now } }) //end divholders.overrideper sist=="undefined") //if this DIV was open by default or should be open due to pe rsistence targetgroup.eq(0) //save reference to toggler image (to be updated inside slid eengine() ac.show () }) if (animatedcollapse.data('sr cs'. "").id //re member this DIV as the last "active" DIV (this DIV will be expanded) this.etc' to array if (divids.getAttribute('data-openimage').getAttribute('data-closedimage')) //preload control imag es (if defined) $togglerimage=$(this). closed:this.$divref.divgroups. (ac.$togglerimage=$(this ).preloadimage(this.divholders.data('srcs').getAttribute( 'data-openimage').overridepersist=1 //Indicate to override persisted div that would have been expanded } if (!targetgroup.') //convert 'div1._divids .each(ac._divids].split('.filter('[rel^="collapse["].divholders[this.targetgroup.css('display')=="none")? $togglerimag e. [rel^="toggle["]') //get all elements on page with rel="collapse[]".divholders[this.$divref. function(){ //loop through ea ch collapsible DIV object and fire ontoggle event animatedcollapse.divholders[this.click(function(){ //assign click behavior to eac h control link var relattr=this.find('img').etc' within identifi er[div1.length>0){ .lastactivedivid].id //re member this DIV as the last "active" DIV (this DIV will be expanded).div2. "") //cache value 'div1.lastactivedivid=this.replace(/(^\w+)|(\ s+)/g.$divref._divids=this.attr(' src'.css('display')) }) } //Parse page for links containing rel attribute var $allcontrols=$('a[rel]').replace(/[\[\]']/g.$divref.

div2. path=/" }.cookie = name+"="+value+". '') groupswithpersist=(groupswithpersist=='')? 'nada' : groupswithpersist.preloadimages .' //store gro ups with which at least one DIV has persistance enabled: 'group1.test(relattr)? 'hide' : 'toggle'](divids) //call correspo nding public function return false } }) //end control. groupswithpersist='' jQuery.setCookie('acopendivids'.click })// end control. days){ if (typeof days!="undefined"){ //if set persistent cookie var expireDate = new Date() expireDate.uninit() }) }) //end doc.animatedcollapse[/expand/i.$/.$/.split(".]*".$divref.]+)/i) //search for expa nddiv=divid or divid1.etc' }) opendivids=(opendivids=='')? 'nada' : opendivids. groupswithpersist) }.setDate(expireDate.split("=")[1] //return its v alue return null }.each $(window). path=/.getAttr('group')+'.each(this.$1!="")? RegExp. function(){ ac.getAttr('persist')) groupswithpersist+=this.replace(/.getDate()+days) document.divholders.toGMTString() } else //else if this is a session only cookie document.group2.test(relattr) ? 'show' : /collapse/i.$1. value. //construct RE to search for targ et name/value pair if (document. getCookie:function(Name){ var re=new RegExp(Name+"=[^.css('display')!='none'){ opendivids+=this.etc' } if (this.cookie.setCookie('acgroupswithpersist'.match(/expanddiv=([\w\-_.re place(/. expires="+expireDate .match(re)) //if cookie found return document.id+'.cookie = name+"="+value+".") : [] }.cookie. uninit:function(){ var opendivids=''. '') this.search.location.getAttr('group') && this.bind('unload'.ready() }. preloadimage:function(){ var preloadimages=this.' //store ids of DIVs that are exp anded when page unloads: 'div1. function(){ if (this. urlparamselect:function(){ window.match(re)[0].etc return (RegExp. setCookie:function(name. opendivids) this.divid2. "i").

length.length>0){ preloadimages[preloadimages. i++){ if (arguments[i] && arguments[i].for (var i=0.length-1].length]=new Image() preloadimages[preloadimages.src=arguments[i] } } } } . i<arguments.