Discussion :

[copin]

Bonjour à tous,

Voilà je rencontre un petit problème de conception.

J'utilise Mootools pour mettre en place un effet accordeon sur des <div> avec une action sur un <h3> comme Ici

J'ai été amené à modifier un peu la fonction afin de mettre en place des accordeon imbriqués.

Ces éléments fonctionnent très bien cependant je souhaite que l'effet accordeon soit également controler par d'autre elements.

Par défaut le <h3 class="accordion_toggler_1"> controle <div class="accordion_content_1"> qui le précède.

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
 
<h3 class="accordion_toggler_1">
Titre 1
</h3>
<div class="accordion_content_1">
Contenu 1
</div>
 
 
<h3 class="accordion_toggler_1">
 Mon épargne 
 </h3>
<div class="accordion_content_1">
Contenu 2 		
 </div>

Je souhaite pouvoir mettre dans ma page pour chaque div un second lien de controle. Je ne peux pas incrementer le nombre à la fin de ma class sinon je perds l'effet de replie au secind dépliage.

Mon js dans son version actuelle.

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
 
window.addEvent('domready', function() {
 
 
	if(window.ie6) var heightValue='100%';
	else var heightValue='';	
 
	var togglerName='.accordion_toggler_';
	var contentName='.accordion_content_';
 
	var counter=1;	
	var toggler=$$(togglerName+counter);
	var content=$$(contentName+counter);
 
	while(toggler.length>0)
	{
		// Accordion anwenden
		new Accordion(toggler, content, {
			opacity: false,
			display: -1,
			alwaysHide: true,
			onComplete: function() { 
				var element=$(this.elements[this.previous]);
				if(element && element.offsetHeight>0) element.setStyle('height', heightValue);			
			},
			onActive: function(toggler, content) {
				toggler.addClass('open');
			},
			onBackground: function(toggler, content) {
				toggler.removeClass('open');
			}
		});
 
		counter++;
		toggler=$$(togglerName+counter);
		content=$$(contentName+counter);
	}
});

Merci de votre aide.

[copin]

Bonjour,

Je n'ai pas trouvé de solution avec Mootools, je reste toutefois preneur.

J'ai réussi à mettre en place l'effet voulu en utilisant Jquery et en résolvant un autre problème propre à Jquery cette fois. ici

Merci quand même!