Gérer plusieurs onglets avec l'effet Slide

Version imprimable

Bonjour à toutes et à tous,

Je viens de créer un menu avec trois 3 rubriques "menu1", "menu2" et "menu3". J'ai mis l'exemple en ligne pour avoir une meilleur visibilité :

http://www.onkei.fr/MULTI_SLIDE/index.html
(il suffit de cliquer sur "BOUTON" pour faire apparaitre le menu)

PROBLEME :
Lorsque je clique sur "MENU 1", un onglet apparait et si je clique de nouveau sur "MENU 1", le menu disparait. Jusque là, tout va bien.

Le problème, c'est lorsque je clique sur "MENU 1"(l'onglet apparait) puis sur "MENU 2", l'onglet 2 vient superposé l'onglet 1. Hors, je voudrais que lorsque que je clique sur "MENU 1" puis MENU 2 , que seul reste le "menu2". Et la meme chose avec "MENU 3" (quand je clique, seul l'onglet de menu3 reste).

Je sais qu'avec des "show()" et hide(), cela fonctionnerait plus facilement, il suffirait d'afficher l'onglet voulu et de faire disparaitre les autres. Mais comment faire avec l'effet slide ?

Voici le code AJAX que j'utilise actuellement :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 <script> $(function(){ $("li.menu_1").toggle( function() { $("div.contenu_1").animate({bottom:'+=210px'}, 100); }, function() { $("div.contenu_1").animate({bottom:'-=210px'}, 100); } ); $("li.menu_2").toggle( function() { $("div.contenu_2").animate({bottom:'+=210px'}, 100); }, function() { $("div.contenu_2").animate({bottom:'-=210px'}, 100); } ); $("li.menu_3").toggle( function() { $("div.contenu_3").animate({bottom:'+=210px'}, 100); }, function() { $("div.contenu_3").animate({bottom:'-=210px'}, 100); } ); }); </script>
Alors si quelqu'un à une idée ? pour l'instant j'utilise la fonction 'toggle' mais je suis ouvert à tout.

Peu être en couplant les effets Show/Hide avec l'effet "animate" mais si oui, comment ?

05/05/2012, 16h16
SpaceFrog

attribue une classe "active" à l'onglet visible après qu'il ait slidé

tu n'auras plus qu'a fait ton slide de retour sur le active

Tout d'abord, merci pour la réponse rapide. Par contre je suis pas sûr de te suivre...même dans le principe. Tu me dis d'ajouter une classe "active" apres avoir fait mon slide, je suppose de cette façon :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 $("li.menu_1").toggle( function() { $("div.contenu_1").animate({bottom:'+=210px'}, 100).addClass("active"); }, function() { $("div.contenu_1").animate({bottom:'-=210px'}, 100); } ); $("li.menu_2").toggle( function() { $("div.contenu_2").animate({bottom:'+=210px'}, 100).addClass("active"); }, function() { $("div.contenu_2").animate({bottom:'-=210px'}, 100); } ); $("li.menu_3").toggle( function() { $("div.contenu_3").animate({bottom:'+=210px'}, 100).addClass("active"); }, function() { $("div.contenu_3").animate({bottom:'-=210px'}, 100); } );
mais la deuxième partie de ta réponse, je capte pas trop ce que tu voudrais que je fasse... ?

Citation:

tu n'auras plus qu'a fait ton slide de retour sur le active

j'aurais plutot vu un truc générique pour les menus au lieu de faire un toggle par menu, colle une classe menu sur les li
et

Code:

1
2
3
4
	$(function(){
			$("li.menu").click(  function() {  $(".active").animate({bottom:'+=210px'}, 100 ,    function(){ $(this).animate({bottom:'-=210px'}, 100).addClass("active"); }).removeClass('active')
			})
                        })

Merci pour ta réponse, je suis parti de ce que tu as fait, et j'ai quelque peu modifier. Bref je suis finalement parvenu au final escompté, alors je mets ici le code que j'ai finalement mis :
Code:

1 2 3 4 5 6 7 8 9 $("li.menu_1").click(function(e) { if ($("div.contenu_1").hasClass("active")) { $("div.contenu_1").removeClass("active").animate({ bottom: "-210px"}, 400); } else { $("div.contenu_1").removeClass("cache").addClass("active").animate({ bottom: "0px" }, 400); $("div.contenu_2").animate({ bottom: "-210px"}, 400).removeClass("active"); $("div.contenu_3").animate({ bottom: "-210px"}, 400).removeClass("active"); } });
Et, ca pour chacun des menus, cela peut paraitre un peu "lourd" mais au final, j'obtiens exactement ce que je voulais => http://www.onkei.fr/MULTI_SLIDE/index.html

Merci en tout cas pour l'aide et qui plus es, rapide :)