accordion avec slideToggle()
Bonjour à tous,
Je souhaite creer un menu dynamique avec lequel en cliquant sur un des élements du menu, un sous menu se deploie. J'utilise dont les fonctions slideToggle() et slideup() pour réaliser ce travail.
Voir ici
Cependant, je ne parviens pas à réaliser l'effet voulu, en effet je voudrais que lorsque le sous menu est déja déployé pour un des éléments, lorsque l'on clique sur un autre élément du menu, le sous-menu déployé se ferme en slideUp() pour se rouvrir en slideToggle. Car ici le div du sous-menu ne remonte pas, il est juste remplacer par le second sous-menu.
Je voudrais cet effet-ci en fait : Louvre.fr
Autre petite chose, j'applique un style pour l'element du menu qui a été cliqué, addClass(). Cependant, chaque element du menu qui a été cliqué, conserve ce style current. Comment faire pour le retirer une fois qu'un autre élément a été cliqué ? removeClass(), mais je ne sais pas comment catcher le precedent item.
Mon code
Code:
1
2
3
4
5
6
7
8
9
10
11
12
|
var $j = jQuery.noConflict();
$j(document).ready(function () {
$j(function(){
$j('.menu-item').click(function(e){
var item_id = e.target.id;
$j(this).addClass("menu-current");
$j('#contenu-' + item_id).slideToggle().siblings('.contenu').slideUp();
});
});
}); |
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
|
<div class="slidemenu">
<ul id="menu">
<li style="cursor:pointer;" id="test" class="menu-item">Accueil</li>
<li style="cursor:pointer;" id="test2" class="menu-item">Liège, La cité des Princes-Evêques</li>
<li style="cursor:pointer;" id="test3" class="menu-item">Boutique</li>
<li style="cursor:pointer;" id="test4" class="menu-item">Informations pratiques</li>
<li style="cursor:pointer;" id="test5" class="menu-item">Aidez-nous</li>
<li style="cursor:pointer;" id="test6" class="menu-item">Contact</li>
</ul>
</div>
<div class="contenu" id="contenu-test">
test test test
</div>
<div class="contenu" id="contenu-test2">
test2 test2 test2
</div>
<div class="contenu" id="contenu-test3">
test3 test3 test3
</div>
<div class="contenu" id="contenu-test4">
test3 test3 test3
</div>
<div class="contenu" id="contenu-test5">
test3 test3 test3
</div>
<div class="contenu" id="contenu-test6">
test3 test3 test3
</div> |
Un grand merci !
