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
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Author" content="Daniel Hagnoul" />
<title>Page type</title>
<style type="text/css">
body {
background-color:#696969;
color:#000000;
font-family:Arial, Helvetica, sans-serif;
font-size:medium;
font-style:normal;
font-weight:normal;
line-height:normal;
letter-spacing:normal;
}
h1,h2,h3,h4,h5 {
font-family:"Times New Roman", Times, serif;
}
div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {
margin:0px;
padding:0px;
}
p {
padding:6px;
}
ul,ol,dl {
list-style:none;
padding-left:6px;
padding-top:6px;
}
li {
padding-bottom:6px;
}
div#conteneur {
width:95%;
margin:12px auto;
padding:6px;
background-color:#FFFFFF;
color:#000000;
border:1px solid #666666;
font-size:0.8em;
}
div#affiche {
margin:12px;
border:1px solid #999999;
}
div#affiche p {
display:none;
}
</style>
<script type="text/javascript" src="../lib/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
/*
* Ne concerne que les boutons dont l'id commencent par 'btn'
* this.id.slice(3) récupère le numéro de l'id
* les paragraphes sont numérotés de 0 à n donc -1
*/
$("button[id^='btn']").bind("click",function(){
$("#affiche p").eq(this.id.slice(3)-1).slideToggle("fast");
});
});
</script>
</head>
<body>
<div id="conteneur">
<button id="btn1" type="button">Montre/Cache 1</button> <button id="btn2" type="button">Montre/Cache 2</button>
<br />
<button id="btn3" type="button">Montre/Cache 3</button> <button id="btn4" type="button">Montre/Cache 4</button>
<div id="affiche">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tincidunt pulvinar elit. Maecenas nec risus vitae felis suscipit scelerisque. Suspendisse placerat lorem ut nisl. Sed sit amet quam sit amet elit tempus eleifend. Aliquam posuere egestas elit. Donec porttitor, urna nec tincidunt rhoncus, tortor purus lacinia turpis, et pellentesque purus dui sed massa. Vivamus tristique mauris quis quam. Aliquam commodo ipsum iaculis tortor. Curabitur pulvinar sem quis tellus. Vestibulum faucibus. Nam quis nisi. Donec justo risus, molestie a, lacinia eu, tincidunt in, lorem. Mauris ut nisi vel ipsum varius convallis. Sed sit amet orci. Vivamus ultricies sem vel dui. Vivamus venenatis, dolor at porta cursus, libero quam imperdiet orci, vel interdum mauris lorem et ligula. Morbi iaculis lacus luctus erat. In pretium, ipsum a lobortis convallis, leo lacus molestie purus, eget pellentesque est felis eu metus. Suspendisse a nisi. Praesent vitae eros vitae turpis auctor ullamcorper.
</p>
<p>
Aliquam erat volutpat. Phasellus cursus tempor augue. Morbi eu nisi et mi interdum lobortis. Nullam faucibus, enim quis ultricies imperdiet, ante leo lacinia nisi, vitae malesuada enim orci id dolor. Maecenas volutpat porta turpis. Ut nibh massa, luctus commodo, cursus eu, ornare eu, nulla. In vitae felis in ligula tincidunt suscipit. Mauris fermentum, magna nec viverra tristique, magna purus scelerisque ipsum, vel accumsan enim dui eu eros. In hac habitasse platea dictumst. Praesent aliquet ipsum sit amet tellus. Vivamus elit est, rhoncus in, iaculis vel, pellentesque sit amet, quam. Nunc id libero eget dolor molestie hendrerit. Etiam odio lectus, venenatis ut, porta eu, luctus ut, libero. Morbi lacinia, urna in tristique fringilla, urna libero convallis velit, nec auctor neque nulla eget ante. Sed elementum.
</p>
<p>
Vestibulum ac nisl sit amet odio lobortis pellentesque. Quisque eu nisl. In ipsum metus, congue in, porta non, luctus ac, dolor. Ut suscipit, metus id blandit scelerisque, dolor nunc varius velit, sit amet feugiat magna neque ut lorem. Ut ut lacus. Curabitur eget magna iaculis tellus pulvinar sagittis. Maecenas eget urna. Nunc scelerisque, justo ultricies luctus consectetur, enim ante aliquam urna, sed ullamcorper quam orci nec arcu. Sed volutpat ligula quis elit. Donec vitae neque vel ipsum ultricies accumsan. Aenean imperdiet tincidunt augue. Morbi elementum metus a dui. Nunc non turpis. Maecenas vel odio non justo bibendum varius. Morbi tincidunt orci et purus. Duis mattis ullamcorper odio.
</p>
<p>
Quisque laoreet libero ac mi pellentesque aliquet. Phasellus at est. In consectetur urna vel leo. Nulla est arcu, posuere quis, tempor vel, rutrum vel, neque. Quisque non enim eu ipsum tincidunt iaculis. Sed vehicula consequat felis. Nulla scelerisque. Curabitur sem erat, cursus nec, eleifend et, accumsan in, ipsum. Suspendisse mauris urna, aliquet id, facilisis lacinia, vehicula vitae, est. Curabitur ac ante nec felis hendrerit scelerisque. Morbi felis neque, venenatis mollis, dignissim ut, faucibus sed, ipsum. Nullam bibendum enim vel nulla eleifend elementum. Fusce rhoncus augue. Duis in est nec nulla dictum vehicula. Nulla consequat, leo in commodo venenatis, sapien eros accumsan velit, tempus tincidunt mauris sem et mi. Nulla nisl.
</p>
</div>
</div>
</body>
</html> |
