1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
.toggleTitle{
width:450px;
height:36px;
line-height:36px;
padding-left:50px;
display:block;
color:#FFFFFF;
font-size:16px;
font-weight:bold;
font-family:Verdana;
text-decoration:none;
}
.open{
background:url('background.png') top no-repeat;
}
.close{
background:url('background.png') 0px -36px no-repeat;
}
.toggleTop{
width:500px;
height:4px;
line-height:4px;
display:block;
background:url('top.png');
margin-top:4px;
}
.toggleBottom{
width:500px;
height:5px;
line-height:5px;
display:block;
background:url('bottom.png');
}
.contentToggle{
width:590px;
padding:5px;
background:url('content.png') repeat-y;
}
.toggle{
overflow:hidden;
}
</style>
<script type="text/javascript">
function getElementsByClassName(className, tag, elm){
var testClass = new RegExp("(^|s)" + className + "(s|$)");
var tag = tag || "*";
var elm = elm || document;
var elements = (tag == "*" && elm.all)? elm.all : elm.getElementsByTagName(tag);
var returnElements = [];
var current;
var length = elements.length;
for(var i=0; i<length; i++){
current = elements[i ];
if(testClass.test(current.className)){
returnElements.push(current);
}
}
return returnElements;
};
var Toggle = {
create: function(target) {
return {
id: "no name",
orientation: "vertical",
myObject : target,
min: 0,
max: target.offsetHeight,
speed: 350,
isOpen : true,
move: function(titleChange) {
if(this.myObject.testTime == null){
start = (this.isOpen) ? this.max:this.min;
end = (this.isOpen) ? this.min:this.max;
c = (350 / 50);
d = Math.round(this.speed / c);
w = new Array();
this.myObject.currentStepX = 0;
this.myObject.testTime = null;
for (var i = 1; i <= d; i++) {
w.push(this.easeOutCubic(i * c, start, end - start, this.speed))
}
titleChange.className = (this.isOpen) ? "toggleTitle close":"toggleTitle open"
this.go(this,c,w);
}
},
go: function(b, c , w) {
b.myObject.testTime = window.setInterval(function() {
var a = true;
if (w[b.myObject.currentStepX]) {
b.myObject.style['height'] = w[b.myObject.currentStepX] + 'px';
b.myObject.currentStepX++;
a = false
}
if (a) {
window.clearInterval(b.myObject.testTime);
b.myObject.testTime = null;
b.isOpen = (b.isOpen) ? false:true;
if (b.callBack) {
b.callBack()
}
return
}
},
c);
},
easeOutCubic : function (t, b, c, d) {
return c*((t=t/d-1)*t*t + 1) + b;
}
}
}
};
</script>
</head>
<body>
<a href="#" class="toggleTitle open" onclick="Toggle1.move(this);return false;">Ouvre</a>
<div class="toggle">
<span class="toggleTop"></span>
<div class="contentToggle">
et la plein plein de contenu <br />
et la plein plein de contenu <br />
et la plein plein de contenu <br />
et la plein plein de contenu <br />
et la plein plein de contenu <br />
et la plein plein de contenu <br />
et la plein plein de contenu <br />
et la plein plein de contenu <br />
et la plein plein de contenu <br />
et la plein plein de contenu <br />
et la plein plein de contenu <br />
</div>
<span class="toggleBottom"></span>
</div>
<script type="text/javascript">
var Toggle1 = Toggle.create(getElementsByClassName('toggle')[0]);
</script>
</body>
</html> |
[SRC] toggle ( paneau déroulant ) -de 5ko ( sans librairie ;) )
Répondre avec citation
), seule petite remarque, la div contentToggle étant plus large que le cadre, ça déborde quand il y a plus de contenu.
Pas de question technique par MP !
Partager