Bonjour tout le monde,
Je voudrai faire un accordéon par mois, mais je suis bloquer.
Merci de votre aide.
J'ai trouvé ça dans Jquery mais je voudrai le faire en HTML et CSS si possible;
Code : Sélectionner tout - Visualiser dans une fenêtre à part
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 <!doctype html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Test Accordéon</title> <link href="css/ui-lightness/jquery-ui-1.10.4.custom.css" rel="stylesheet"> <script src="js/jquery-1.10.2.js"></script> <script src="js/jquery-ui-1.10.4.custom.js"></script> <script> $(function() { $( "#accordion" ).accordion(); // Hover states on the static widgets $( "#dialog-link, #icons li" ).hover( function() { $( this ).addClass( "ui-state-hover" ); }, function() { $( this ).removeClass( "ui-state-hover" ); } ); }); $(function() { $( "#accordion_jour" ).accordion(); // Hover states on the static widgets $( "#dialog-link, #icons li" ).hover( function() { $( this ).addClass( "ui-state-hover" ); }, function() { $( this ).removeClass( "ui-state-hover" ); } ); }); </script> <style> body{ font: 62.5% "Arial", sans-serif; margin: 50px; } .demoHeaders { margin-top: 2em; } #dialog-link { padding: .4em 1em .4em 20px; text-decoration: none; position: relative; } #dialog-link span.ui-icon { margin: 0 5px 0 0; position: absolute; left: .2em; top: 50%; margin-top: -8px; } #icons { margin: 0; padding: 0; } #icons li { margin: 2px; position: relative; padding: 4px 0; cursor: pointer; float: left; list-style: none; } #icons span.ui-icon { float: left; margin: 0 4px; } .fakewindowcontain .ui-widget-overlay { position: absolute; } </style> </head> <body> <h2 class="demoHeaders">Accordion</h2> <div id="accordion"> <h3>Janvier</h3> <ul id="accordion_jour"> <h3>01</h3> <div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div> <h3>02</h3> <div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div> <h3>03</h3> <div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div> </ul> <h3>Février</h3> <div>Phasellus mattis tincidunt nibh.</div> <h3>Mars</h3> <div>Nam dui erat, auctor a, dignissim quis.</div> </div> </div> </body> </html>
Cdlt
Zozotitou
Partager