Séquence de déroulement avec Query

Bonjour tout le monde,

Je suis sur un nouveau projet, je souhaite faire une page qui contient trois onglet, déroulés avec JQuery, lorsqu'on clique sur le lien référent à cet onglet.

La seule chose que je n'arrive pas à mettre en œuvre est la fermeture (ré-enroulement) de l'onglet ouvert AVANT le déroulement du suivant.

Voyez par vous même : Test.html
(essayer de cliquer sur webdesign, puis portfolio par exemple.)

Voici mon script java :

<!-- 
$(document).ready( function () { 
    // On cache les sous-menus 
    // sauf celui qui porte la classe "open_at_load" : 
    $(".navigation div.onglet:not('.open_at_load')").hide(); 
    // On sélectionne tous les items de liste portant la classe "deroulant" 
 
    // et on remplace l'élément span qu'ils contiennent par un lien : 
    $(".navigation li.deroulant span").each( function () { 
        // On stocke le contenu du span : 
        var TexteSpan = $(this).text(); 
        $(this).replaceWith('<a href="" title="Afficher l\'onglet">' + TexteSpan + '<\/a>') ; 
    } ) ; 
 
    // On modifie l'évènement "click" sur les liens dans les items de liste 
    // qui portent la classe "deroulant" : 
    $(".navigation li.deroulant > a").click( function () 
	{ 
        // Si l'longlet était déjà ouvert, on le referme : 
        if ($(this).next("div.onglet:visible").length != 0) { 
            $(this).next("div.onglet").slideUp("normal", function () { $(this).parent().removeClass("open") } ); 
        } 
        // Si l'onglet est caché, on ferme les autres et on l'affiche : 
        else { 
            $(".navigation div.onglet").slideUp("normal", function () { $(this).parent().removeClass("open") }); 
			$(this).next("div.onglet").slideDown("normal", function () { $(this).parent().addClass("open") } ); 
        }
		
        return false; 
    }); 
 
} ) ; 
// --> 

Merci d'avance pour votre aide.

Oré
Modifié par Ore (10 Jan 2010 - 13:05)

Personne n'est disposé à me donner un petit coup de main ?

Salut,

Il faut déplacer l'ouverture de l'onglet dans la fonction de callback :

            // contenu du else : onglet caché
            $this = $(this);
            $(".navigation div.onglet").slideUp("normal", function () {
                        $(this).parent().removeClass("open");
                        $this.next("div.onglet").slideDown("normal", function () { $(this).parent().addClass("open") } );
            });