https://life-news.ru/templates/00051/js/animatedcollapse.js

1//Animated Collapsible DIV- Author: Dynamic Drive (http://www.dynamicdrive.com)
2//Last updated Aug 1st, 07'. Fixed bug with "block" parameter not working when persist is enabled
3//Updated June 27th, 07'. Added ability for a DIV to be initially expanded.
4
5var uniquepageid=window.location.href.replace("http://"+window.location.hostname, "").replace(/^\//, "") //get current page path and name, used to uniquely identify this page for persistence feature
6
7function animatedcollapse(divId, animatetime, persistexpand, initstate){
8	this.divId=divId
9	this.divObj=document.getElementById(divId)
10	this.divObj.style.overflow="hidden"
11	this.timelength=animatetime
12	this.initstate=(typeof initstate!="undefined" && initstate=="block")? "block" : "contract"
13	this.isExpanded=animatedcollapse.getCookie(uniquepageid+"-"+divId) //"yes" or "no", based on cookie value
14	this.contentheight=parseInt(this.divObj.style.height)
15	var thisobj=this
16	if (isNaN(this.contentheight)){ //if no CSS "height" attribute explicitly defined, get DIV's height on window.load
17		animatedcollapse.dotask(window, function(){thisobj._getheight(persistexpand)}, "load")
18		if (!persistexpand && this.initstate=="contract" || persistexpand && this.isExpanded!="yes" && this.isExpanded!="") //Hide DIV (unless div should be expanded by default, OR persistence is enabled and this DIV should be expanded)
19			this.divObj.style.visibility="hidden" //hide content (versus collapse) until we can get its height
20	}
21	else if (!persistexpand && this.initstate=="contract" || persistexpand && this.isExpanded!="yes" && this.isExpanded!="") //Hide DIV (unless div should be expanded by default, OR persistence is enabled and this DIV should be expanded)
22		this.divObj.style.height=0 //just collapse content if CSS "height" attribute available
23	if (persistexpand)
24		animatedcollapse.dotask(window, function(){animatedcollapse.setCookie(uniquepageid+"-"+thisobj.divId, thisobj.isExpanded)}, "unload")
25}
26
27animatedcollapse.prototype._getheight=function(persistexpand){
28	this.contentheight=this.divObj.offsetHeight
29	if (!persistexpand && this.initstate=="contract" || persistexpand && this.isExpanded!="yes"){ //Hide DIV (unless div should be expanded by default, OR persistence is enabled and this DIV should be expanded)
30		this.divObj.style.height=0 //collapse content
31		this.divObj.style.visibility="visible"
32	}
33	else //else if persistence is enabled AND this content should be expanded, define its CSS height value so slideup() has something to work with
34		this.divObj.style.height=this.contentheight+"px"
35}
36
37
38animatedcollapse.prototype._slideengine=function(direction){
39	var elapsed=new Date().getTime()-this.startTime //get time animation has run
40	var thisobj=this
41	if (elapsed<this.timelength){ //if time run is less than specified length
42		var distancepercent=(direction=="down")? animatedcollapse.curveincrement(elapsed/this.timelength) : 1-animatedcollapse.curveincrement(elapsed/this.timelength)
43	this.divObj.style.height=distancepercent * this.contentheight +"px"
44	this.runtimer=setTimeout(function(){thisobj._slideengine(direction)}, 10)
45	}
46	else{ //if animation finished
47		this.divObj.style.height=(direction=="down")? this.contentheight+"px" : 0
48		this.isExpanded=(direction=="down")? "yes" : "no" //remember whether content is expanded or not
49		this.runtimer=null
50	}
51}
52
53
54animatedcollapse.prototype.slidedown=function(){
55	if (typeof this.runtimer=="undefined" || this.runtimer==null){ //if animation isn't already running or has stopped running
56		if (isNaN(this.contentheight)) //if content height not available yet (until window.onload)
57			alert("Please wait until document has fully loaded then click again")
58		else if (parseInt(this.divObj.style.height)==0){ //if content is collapsed
59			this.startTime=new Date().getTime() //Set animation start time
60			this._slideengine("down")
61		}
62	}
63}
64
65animatedcollapse.prototype.slideup=function(){
66	if (typeof this.runtimer=="undefined" || this.runtimer==null){ //if animation isn't already running or has stopped running
67		if (isNaN(this.contentheight)) //if content height not available yet (until window.onload)
68			alert("Please wait until document has fully loaded then click again")
69		else if (parseInt(this.divObj.style.height)==this.contentheight){ //if content is expanded
70			this.startTime=new Date().getTime()
71			this._slideengine("up")
72		}
73	}
74}
75
76animatedcollapse.prototype.slideit=function(){
77	if (isNaN(this.contentheight)) //if content height not available yet (until window.onload)
78		alert("Please wait until document has fully loaded then click again")
79	else if (parseInt(this.divObj.style.height)==0)
80		this.slidedown()
81	else if (parseInt(this.divObj.style.height)==this.contentheight)
82		this.slideup()
83}
84
85// -------------------------------------------------------------------
86// A few utility functions below:
87// -------------------------------------------------------------------
88
89animatedcollapse.curveincrement=function(percent){
90	return (1-Math.cos(percent*Math.PI)) / 2 //return cos curve based value from a percentage input
91}
92
93
94animatedcollapse.dotask=function(target, functionref, tasktype){ //assign a function to execute to an event handler (ie: onunload)
95	var tasktype=(window.addEventListener)? tasktype : "on"+tasktype
96	if (target.addEventListener)
97		target.addEventListener(tasktype, functionref, false)
98	else if (target.attachEvent)
99		target.attachEvent(tasktype, functionref)
100}
101
102animatedcollapse.getCookie=function(Name){ 
103	var re=new RegExp(Name+"=[^;]+", "i"); //construct RE to search for target name/value pair
104	if (document.cookie.match(re)) //if cookie found
105		return document.cookie.match(re)[0].split("=")[1] //return its value
106	return ""
107}
108
109animatedcollapse.setCookie=function(name, value){
110		document.cookie = name+"="+value
111}