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
| <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Nouvelle page 1</title>
<script type='text/javascript'>
var y = 1;
var step = 20;
var down = true;
var minstep=step;
var running=false;
var t
function smooth_on_off(p_id, hmax){
running=true;
obj=document.getElementById(p_id);
if(y>hmax&&down){step=-step;
down=false;
running=false;
clearInterval(t);
return false;}
if(y<minstep&&!down){step=-step;
down=true;
running=false;
y=1;
clearInterval(t);
return false;}
y = y+step;
obj.style.height = y + 'px';
}
function deroule(p_id,hmax){
if (running) {return false;}
t=setInterval(function(){smooth_on_off(p_id,hmax)},1)
}
</script>
<style type='text/css'>
div.main{
width: 700px;
background: #CCEEDD;
font-weight: bold;
}
div.title{
width: 700px;
height: 30px;
background: navy;
color:white;
font-weight: bold;
font-size:14px;
line-height:30px;
cursor: pointer;
padding-left:10px;
}
div.content{
width: 700px;
height: 1px;
background: #FFEEFF;
display: block;
overflow: hidden;
font-weight: normal;
position:absolute;
z-index:2;
padding:10px;
text-align:justify;
}
body {font-family:verdana;}
</style>
</head>
<body onload="document.body.focus()">
<div class="main">
<div class="title" onclick="deroule('flop', 200);" >
Un petit texte
</div>
<div id="flop" class="content">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla placerat. Maecenas cursus, enim at laoreet laoreet, lacus quam placerat quam, nec blandit urna arcu quis turpis. Nunc sit amet orci. Aliquam id mi. Maecenas massa leo, interdum faucibus, aliquam nec, lacinia et, diam. Phasellus mollis fermentum enim. Aenean ut enim et est vulputate bibendum. Integer tellus nisi, nonummy et, feugiat at, molestie non, leo. Praesent eu sem. Quisque tincidunt tellus quis libero. Maecenas justo. Nulla gravida, turpis eget facilisis tempor, ipsum metus sollicitudin urna, eget elementum eros diam ut dui. Sed luctus diam quis velit. Vestibulum fringilla lacus sed nisl. Pellentesque hendrerit placerat nisl. Cras vitae risus. Duis pulvinar, orci nec ultricies laoreet, magna est dictum nunc, quis pulvinar est leo quis ipsum. Ut mauris mauris, bibendum eu, consequat et, luctus non, massa. Phasellus felis. Quisque felis.
Suspendisse orci nisi, rutrum eu, vestibulum non, aliquet a, est. Vivamus elit. Vestibulum ultricies urna in odio. Duis laoreet. Proin porttitor purus et dolor. Suspendisse sed tellus quis nulla pulvinar vehicula. Praesent tincidunt nisi ut augue. Aliquam semper risus id risus. Pellentesque elementum feugiat nisl. In hac habitasse platea dictumst. Vivamus mattis. Donec sodales orci. Donec ut velit. Phasellus aliquet, felis non ultricies accumsan, lacus eros iaculis dui, ac fringilla sem dolor vitae nisi. Ut eu arcu. Proin tellus.
</div>
</div>
</body> |
