Anda di halaman 1dari 6

//** Animated Collapsible DIV v2.

0- (c) Dynamic Drive DHTML code library: http:/

//** 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
var animatedcollapse={
divholders: {}, //structure: {, div.attrs, div.$divref, div.$togglerimage}
divgroups: {}, //structure: {groupname.count, groupname.lastactivedivid}
lastactiveingroup: {}, //structure: {}
preloadimages: [],
show:function(divids){ //public method
if (typeof divids=="object"){
for (var i=0; i<divids.length; i++)
this.showhide(divids[i], "show")
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")
this.showhide(divids, "hide")
toggle:function(divid){ //public method
if (typeof divid=="object")
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)

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

return map
var ac=this
animatedcollapse.ontoggle=animatedcollapse.ontoggle || null
var urlparamopenids=animatedcollapse.urlparamselect() //Get div
ids that should be expanded based on the url (['div1','div2',etc])
var persistopenids=ac.getCookie('acopendivids') //Get list of di
v ids that should be expanded due to persistence ('div1,div2,etc')
var groupswithpersist=ac.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, and cookie hasnt been set yet)
persistopenids=(persistopenids=='nada')? [] : persistope
nids.split(',') //if no divs are persisted, set to empty array, else, array of d
iv ids
groupswithpersist=(groupswithpersist==null || groupswithpersist=
='nada')? [] : groupswithpersist.split(',') //Get list of groups with divs that
are persisted
jQuery.each(ac.divholders, function(){ //loop through each colla
psible DIV object
if ((this.getAttr('persist') || jQuery.inArray(this.getA
ttr('group'), groupswithpersist)!=-1) && persistopenids!=null){ //if this div ca
rries a user "persist" setting, or belong to a group with at least one div that
var cssdisplay=(jQuery.inArray(, persisto
penids)!=-1)? 'block' : 'none'
var cssdisplay=this.getAttr('hide')? 'none' : nu
if (urlparamopenids[0]=="all" || jQuery.inArray(,
urlparamopenids)!=-1){ //if url parameter string contains the single array elem
ent "all", or this div's ID
cssdisplay='block' //set div to "block", overrid
ing any other setting
else if (urlparamopenids[0]=="none"){
cssdisplay='none' //set div to "none", overridin
g any other setting
this.$divref.css(ac.generatemap(['height', this.getAttr(
'height')], ['display', cssdisplay]))
this.$divref.attr(ac.generatemap(['groupname', this.getA
ttr('group')], ['fade', this.getAttr('fade')], ['speed', this.getAttr('speed')])
if (this.getAttr('group')){ //if this DIV has the "group
" attr defined
var targetgroup=ac.divgroups[this.getAttr('group
')] || (ac.divgroups[this.getAttr('group')]={}) //Get settings for this group, o
r if it no settings exist yet, create blank object to store them in
targetgroup.count=(targetgroup.count||0)+1 //cou
nt # of DIVs within this group
if (jQuery.inArray(, urlparamopenids)!=-1
){ //if url parameter string contains this div's ID //re
member this DIV as the last "active" DIV (this DIV will be expanded). Overrides
other settings
targetgroup.overridepersist=1 //Indicate
to override persisted div that would have been expanded
if (!targetgroup.lastactivedivid && this.$divref
.css('display')!='none' || cssdisplay=="block" && typeof targetgroup.overrideper
sist=="undefined") //if this DIV was open by default or should be open due to pe
rsistence //re
member this DIV as the last "active" DIV (this DIV will be expanded)
this.$divref.css({display:'none'}) //hide any DI
V that's part of said group for now
}) //end divholders.each
jQuery.each(ac.divgroups, function(){ //loop through each group
if (this.lastactivedivid && urlparamopenids[0]!="none")
//show last "active" DIV within each group (one that should be expanded), unless
url param="none"
if (animatedcollapse.ontoggle){
jQuery.each(ac.divholders, function(){ //loop through ea
ch collapsible DIV object and fire ontoggle event
animatedcollapse.ontoggle(jQuery, this.$divref.g
et(0), this.$divref.css('display'))
//Parse page for links containing rel attribute
var $allcontrols=$('a[rel]').filter('[rel^="collapse["], [rel^="
expand["], [rel^="toggle["]') //get all elements on page with rel="collapse[]",
"expand[]" and "toggle[]"
$allcontrols.each(function(){ //loop though each control link
s+)/g, "").replace(/[\[\]']/g, "") //cache value 'div1,div2,etc' within identifi
if (this.getElementsByTagName('img').length==1 && ac.div
holders[this._divids]){ //if control is an image link that toggles a single DIV
(must be one to one to update status image)
'data-openimage'), this.getAttribute('data-closedimage')) //preload control imag
es (if defined)
cs', {open:this.getAttribute('data-openimage'), closed:this.getAttribute('data-c
losedimage')}) //remember open and closed images' paths
).find('img').eq(0) //save reference to toggler image (to be updated inside slid
src', (ac.divholders[this._divids].$divref.css('display')=="none")? $togglerimag'srcs').closed : $'srcs').open)
$(this).click(function(){ //assign click behavior to eac
h control link
var relattr=this.getAttribute('rel')
var divids=(this._divids=="")? [] : this._divids
.split(',') //convert 'div1,div2,etc' to array
if (divids.length>0){

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

for (var i=0; i<arguments.length; i++){

if (arguments[i] && arguments[i].length>0){
preloadimages[preloadimages.length]=new Image()