Effet accordeon avec Mootools avec Onclick
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:
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:
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.
