Accordion avec mootools

**jpclutier** · 25/01/2011, 16h57

Bonjour,
J'essaye péniblement de faire un accordion avec mootools d'après le tuto mootools en 30 jours (le 17ème c'est l'accordion).
Que ce soit avec FF 3.6 ou IE 8, ce n'est pas terrible. Voici le code. Si quelqu'un pouvait m'aider svp..(Si je ne met pas les 3 premières div il me donne une erreur onactive. Si je les met j'ai trois bandes horizontzles...comment m'en dépétrer...?

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
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 
<head>
<title></title>
 
<!--  your css style sheet -->  
<link rel=stylesheet href="mootools/accordion/css/main.css" type="text/css" media=screen>  
<!--  the Mootools 1.3 core javascript file -->  
<script src="mootools/mootools-core-1.3-full-compat.js" type="text/javascript"></script>
 
<!--  your external javascript file -->  
<script src="mootools/accordion/js/mootools-1.2-more.js" type="text/javascript"></script>
<script src="mootools/accordion/js/external_file.js" type="text/javascript"></script>  
 
<!-- here is your script tag within the head doc, you can call your functions here -->
<script type="text/javascript">  
//look for the functions within the external javascript file
 
window.addEvent('domready', function() {
	//send the toggle and content arrays to vars
	var toggles = $$('.togglers');
	var content = $$('.elements');
 
	//set up your object var
	//create a "new" Accordian object
	//set the toggle array
	//set the content array
	//set your objects and events 
	var AccordionObject = new Accordion(toggles, content, {
		display: 0,
		height : true,
		width : false,
		opacity: true,
		fixedHeight: false, 
		fixedWidth: false,
		alwaysHide: true,
		onComplete: function(one, two, three, four){
			one.highlight('#5D80C8'); //blue
			two.highlight('#5D80C8');
			three.highlight('#5D80C8');
			four.highlight('#5D80C8'); 
			$('complete').highlight('#5D80C8');
		},
		onActive: function(toggler, element) {
			toggler.highlight('#76C83D'); //green
			element.highlight('#76C83D');
			$('active').highlight('#76C83D');
		},
		onBackground: function(toggler, element) {
			toggler.highlight('#DC4F4D'); //red
			element.highlight('#DC4F4D');	
			$('background').highlight('#DC4F4D');	
		}
	});
 
});
</script>   
 
 
</head>
<body>
 <div id="complete" class="ind"></div>
 <div id="active" class="ind"></div>
 <div id="background" class="ind"></div>
 
 <div id="accordian_wrap">
  <h3 class="togglers">Environnement</h3>
   <p class="elements"><a href="\\srv-files1\Achats">Achats</a>
    <br><a href="\\srv-files1\Dechets_Sol">Déchets Sol</a>
    <br><a href="\\srv-files1\Environnement\Eau_et_Rejets">Eau et rejets</a>
    <br><a href="\\srv-files1\Environnement\Emissions_Atmospheriques">Emissions Atmosphériques</a>
    <br><a href="\\srv-files1\Environnement\Energies">Energies</a>
    <br><a href="\\srv-files1\Environnement\Exigences_Reglementaires">Exigences Règlementaires</a>
    <br><a href="\\srv-files1\Environnement\Paysage">Paysage</a>
    <br><a href="\\srv-files1\Environnement\Plan_General_Actions">Plan Général Actions</a>
    <br><a href="\\srv-files1\Environnement\Produits_Chimiques">Produits Chimiques</a>
    <br><a href="\\srv-files1\Environnement\Transports">Transports</a></p>
  <h3 class="togglers">Qualité Gestion des Risques</h3>
   <p class="elements"><a href="\\srv-files1\DocsV2010_Qual">Qualité Docs v2010</a></p>
  <h3 class="togglers">Auto Evaluation</h3>
   <p class="elements"><a href="\\srv-files1\AutoEval">Rapport Auto Evaluation</a>
    <br><a href="\\srv-files1\EltsPreuve">Eléments de preuve</a></p>
  <h3 class="togglers">Groupes</h3>
   <p class="elements"><a href="\\srv-files1\Groupe1_Qual">1.Management de l'Etablissement. Stratégie de l'Etablissement</a>
    <br><a href="\\srv-files1\Groupe2_Qual">2.Management de l'Etablissement. Gestion des ressources humaines</a>
    <br><a href="\\srv-files1\Groupe3_Qual">3.Management de l'Etablissement. Gestion des ressources financières</a>
    <br><a href="\\srv-files1\Groupe4_Qual">4.Management de l'Etablissement. Le Système d'Information</a>
    <br><a href="\\srv-files1\Groupe5_Qual">5.Management de l'Etablissement. Gestion des fonctions logistiques</a>
    <br><a href="\\srv-files1\Groupe6_Qual">6.Management de l'Etablissement. Qualité et sécurité de l'environnements</a>
    <br><a href="\\srv-files1\Groupe7_Qual">7.Management de l'Etablissement. Management de la qualité et des risques</a>
    <br><a href="\\srv-files1\Groupe8_Qual">8.Management de l'Etablissement. Gestion des plaintes et évaluation satisfaction usagers</a>
    <br><a href="\\srv-files1\Groupe9_Qual">9.Prise en charge du Patient. Droits et place des Patients</a>
    <br><a href="\\srv-files1\Groupe10_Qual">10.Prise en charge du Patient. Evaluation des pratiques professionnelles</a></p>
 </div>
</body>
</html>

**jpclutier** · 26/01/2011, 10h17

Devant la frénésie des réponses à ce post voici un code qui fonctionne :

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
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 
<head>
<title></title>
 
<!--  your css style sheet -->  
<link rel=stylesheet href="mootools/accordion/css/main.css" type="text/css" media=screen>  
<!--  the Mootools 1.3 core javascript file -->  
<script src="mootools/mootools-core-1.3-full-compat.js" type="text/javascript"></script>
 
<!--  your external javascript file -->  
<script src="mootools/accordion/js/mootools-1.2-more.js" type="text/javascript"></script>
<script src="mootools/accordion/js/external_file.js" type="text/javascript"></script>  
 
<!-- here is your script tag within the head doc, you can call your functions here -->
<script type="text/javascript">  
//look for the functions within the external javascript file
 
window.addEvent('domready', function() {
	//send the toggle and content arrays to vars
	var toggles = $$('.togglers');
	var content = $$('.elements');
 
	//set up your object var
	//create a "new" Accordian object
	//set the toggle array
	//set the content array
	//set your objects and events 
	var AccordionObject = new Accordion(toggles, content, {
		display: 0,
		height : true,
		width : false,
		opacity: true,
		fixedHeight: false, 
		fixedWidth: false,
		alwaysHide: true,
		onComplete: function(one, two, three, four){
			one.highlight('#5D80C8'); //blue
			two.highlight('#5D80C8');
			three.highlight('#5D80C8');
			four.highlight('#5D80C8'); 
		},
		onActive: function(toggler, element) {
			toggler.highlight('#76C83D'); //green
			element.highlight('#76C83D');
		},
		onBackground: function(toggler, element) {
			toggler.highlight('#DC4F4D'); //red
			element.highlight('#DC4F4D');	
		}
	});
});
</script>   
 
</head>
<body>
<!-- <div id="complete" class="ind"></div>
 <div id="active" class="ind"></div>
 <div id="background" class="ind"></div> -->
 
 <div id="accordian_wrap">
  <h3 class="togglers">Environnement</h3>
   <p class="elements"><a href="\\srv-files1\Achats">Achats</a>
    <br><a href="\\srv-files1\Dechets_Sol">Déchets Sol</a>
    <br><a href="\\srv-files1\Environnement\Eau_et_Rejets">Eau et rejets</a>
    <br><a href="\\srv-files1\Environnement\Emissions_Atmospheriques">Emissions Atmosphériques</a>
    <br><a href="\\srv-files1\Environnement\Energies">Energies</a>
    <br><a href="\\srv-files1\Environnement\Exigences_Reglementaires">Exigences Règlementaires</a>
    <br><a href="\\srv-files1\Environnement\Paysage">Paysage</a>
    <br><a href="\\srv-files1\Environnement\Plan_General_Actions">Plan Général Actions</a>
    <br><a href="\\srv-files1\Environnement\Produits_Chimiques">Produits Chimiques</a>
    <br><a href="\\srv-files1\Environnement\Transports">Transports</a></p>
  <h3 class="togglers">Qualité Gestion des Risques</h3>
   <p class="elements"><a href="\\srv-files1\DocsV2010_Qual">Qualité Docs v2010</a></p>
  <h3 class="togglers">Auto Evaluation</h3>
   <p class="elements"><a href="\\srv-files1\AutoEval">Rapport Auto Evaluation</a>
    <br><a href="\\srv-files1\EltsPreuve">Eléments de preuve</a></p>
  <h3 class="togglers">Groupes</h3>
   <p class="elements"><a href="\\srv-files1\Groupe1_Qual">1.Management de l'Etablissement. Stratégie de l'Etablissement</a>
    <br><a href="\\srv-files1\Groupe2_Qual">2.Management de l'Etablissement. Gestion des ressources humaines</a>
    <br><a href="\\srv-files1\Groupe3_Qual">3.Management de l'Etablissement. Gestion des ressources financières</a>
    <br><a href="\\srv-files1\Groupe4_Qual">4.Management de l'Etablissement. Le Système d'Information</a>
    <br><a href="\\srv-files1\Groupe5_Qual">5.Management de l'Etablissement. Gestion des fonctions logistiques</a>
    <br><a href="\\srv-files1\Groupe6_Qual">6.Management de l'Etablissement. Qualité et sécurité de l'environnements</a>
    <br><a href="\\srv-files1\Groupe7_Qual">7.Management de l'Etablissement. Management de la qualité et des risques</a>
    <br><a href="\\srv-files1\Groupe8_Qual">8.Management de l'Etablissement. Gestion des plaintes et évaluation satisfaction usagers</a>
    <br><a href="\\srv-files1\Groupe9_Qual">9.Prise en charge du Patient. Droits et place des Patients</a>
    <br><a href="\\srv-files1\Groupe10_Qual">10.Prise en charge du Patient. Evaluation des pratiques professionnelles</a></p>
 </div>
</body>
</html>

Accordion avec mootools [MooTools]

Bibliothèques & Frameworks

Discussions similaires

Partager

Partager