Smoothly expand and collapse div
1
<!--
2Created by 周晓林
32009-05-12
4-->
5
6<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
7<html xmlns="http://www.w3.org/1999/xhtml" >
8<head>
9 <title>Untitled Page</title>
10
<style type="text/css" >
11
12 body
13
{
14 font-family:verdana;
15 font-size:12px;
16
}
17
18 #title_div
19 {
20 background-color:Yellow; cursor:pointer; font-weight:bold;padding: 2px 2px 2px 10px
21 }
22
23 #subList
24 {
25 display:block; border:solid 1px yellow; overflow:hidden; height:0px;
26 }
27
28
</style>
29 <script type="text/javascript" >
30
31 var h = 0;
32 var timerId;
33 var timerId_;
34 var speed=20;
35 var divHeight = 180;
36 var listId = "subList";
37 function smoothExpand()
38 {
39 var div = document.getElementById(listId);
40 if(h<divHeight)
41 {
42 h=h+speed;
43 div.style.height= (h).toString()+"px";
44 }
45 else
46 {
47 clearInterval(timerId);
48 }
49 }
50
51 function smoothCollapse()
52 {
53 var div = document.getElementById(listId);
54 if(h>0)
55 {
56 h=h-speed;
57 div.style.height= (h).toString()+"px";
58 }
59 else
60 {
61 clearInterval(timerId_);
62 }
63 }
64
65 function expand()
66 {
67 var div = document.getElementById(listId);
68 var img = document.getElementById("img");
69 var s;
70
71 if(img.src.toLowerCase().indexOf("expand.gif")>-1)
72 {
73 s="../Expand/collpase.GIF";
74 }
75
76 if(img.src.toLowerCase().indexOf("collpase.gif")>-1)
77 {
78 s="../Expand/expand.GIF";
79 }
80
81 img.src=s;
82
83 if(div.currentStyle.height=="0px")
84 {
85 timerId = setInterval(smoothExpand, 1);
86 }
87 else if(div.currentStyle.height==divHeight.toString()+"px")
88 {
89 timerId_=setInterval(smoothCollapse,1);
90 }
91 }
92
93 </script>
94</head>
95<body>
96 <div id="title_div" onclick="expand()" >
97 <img id="img" src="../Expand/expand.GIF" />
98 Click here to expand</div>
99 <div id="subList">
100 <br />
101 <ul>
102 <li>Where to buy Program</li>
103 <li>Where to buy Program</li>
104 <li>Where to buy Program</li>
105 <li>Where to buy Program</li>
106 <li>Where to buy Program</li>
107 <li>Where to buy Program</li>
108 <li>Where to buy Program</li>
109 </ul>
110 </div>
111</body>
112</html>
113
<!--2
Created by 周晓林3
2009-05-124
-->5
6
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">7
<html xmlns="http://www.w3.org/1999/xhtml" >8
<head>9
<title>Untitled Page</title>10
<style type="text/css" >
11
12
body13
{
14
font-family:verdana;15
font-size:12px;16
} 17
18
#title_div19
{20
background-color:Yellow; cursor:pointer; font-weight:bold;padding: 2px 2px 2px 10px21
}22
23
#subList24
{25
display:block; border:solid 1px yellow; overflow:hidden; height:0px;26
}27
28
</style> 29
<script type="text/javascript" >30
31
var h = 0;32
var timerId;33
var timerId_;34
var speed=20; 35
var divHeight = 180;36
var listId = "subList"; 37
function smoothExpand() 38
{ 39
var div = document.getElementById(listId);40
if(h<divHeight)41
{42
h=h+speed;43
div.style.height= (h).toString()+"px"; 44
}45
else46
{47
clearInterval(timerId);48
} 49
} 50
51
function smoothCollapse() 52
{ 53
var div = document.getElementById(listId);54
if(h>0)55
{56
h=h-speed;57
div.style.height= (h).toString()+"px"; 58
}59
else60
{61
clearInterval(timerId_);62
} 63
}64
65
function expand()66
{67
var div = document.getElementById(listId);68
var img = document.getElementById("img");69
var s;70
71
if(img.src.toLowerCase().indexOf("expand.gif")>-1)72
{73
s="../Expand/collpase.GIF";74
}75
76
if(img.src.toLowerCase().indexOf("collpase.gif")>-1)77
{ 78
s="../Expand/expand.GIF";79
}80
81
img.src=s;82
83
if(div.currentStyle.height=="0px")84
{ 85
timerId = setInterval(smoothExpand, 1);86
}87
else if(div.currentStyle.height==divHeight.toString()+"px")88
{89
timerId_=setInterval(smoothCollapse,1);90
} 91
} 92
93
</script> 94
</head>95
<body>96
<div id="title_div" onclick="expand()" >97
<img id="img" src="../Expand/expand.GIF" />98
Click here to expand</div>99
<div id="subList">100
<br /> 101
<ul>102
<li>Where to buy Program</li>103
<li>Where to buy Program</li>104
<li>Where to buy Program</li>105
<li>Where to buy Program</li>106
<li>Where to buy Program</li>107
<li>Where to buy Program</li>108
<li>Where to buy Program</li>109
</ul>110
</div> 111
</body>112
</html>113
