Buongiorno a tutti programmatori,
Ho un problema con un accordion su 3 livellistrutturato in questo modo:

codice:





    $(".l1").click(function(e) {


        //debugger;
        //Mostra tutto se non attivo fino al prossimo accordion di livello 1 (non mostra quelli di livello 3)
        //nascondi fino al prossimo accordion di livello 1
        if ($(e.currentTarget).hasClass("active") == false) {
            $(e.currentTarget).addClass("active");


            var cont = 0;
            var curr = e.currentTarget,
                next, stop = false;
            var toShow = [];
            var toHide = [];
            var flag = 0;
            do {
                cont++;
                next = $(curr).next()[0];
                curr = next;
                //unica condizione di uscita è trovare un l1, parto da l1 e mi porto subito a next
                //se next è l2 o linker faccio:
                if ((($(curr).hasClass("l2")) && (flag == 0)) || (flag == 2)) {


                    //se next è l2 , la prima volta entro, dalla seconda solo se sono flaggato
                    flag = 2;
                    toShow.push(curr);
                    //curr = next;
                }
                if ((($(curr).hasClass("linker")) && (flag == 0)) || (flag == 3)) {
                    //se next è un linker ,prima volta entro poi solo se sono flaggato come linker, quindi posso iterare su me stesso
                    flag = 3;
                    toShow.push(curr);




                }


                if ($(curr).hasClass("l1") || next === undefined) {
                    stop = true;
                }




            } while (stop == false);
            //è qui che decido cosa far vedere ma facilmente grazie ai flag.
            for (var i = 0; i < toShow.length; i++) {


                if (($("#" + toShow[i].id).hasClass("l2")) && (flag == 2)) {


                    $("#" + toShow[i].id).slideDown();
/*QUI AVVIENE IL RITARDO*/


                } else if (flag == 3) {


                    var linker = document.getElementsByClassName("linker");


                    $("#" + toShow[i].id).slideDown();


                }


            }
        } else if ($(e.currentTarget).hasClass("active")) {




            $(e.currentTarget).removeClass("active");
            var curr = e.currentTarget,
                next, stop;
            var toHide = [];


            do {
                next = $(curr).next()[0];
                if ($(next).hasClass("l1") || $(next).hasClass("l2")) {


                    if ($(next).hasClass("l2")) {


                        toHide.push(next);
                        curr = next;
                        stop = false;
                    } else {


                        stop = true;
                    }


                } else {


                    toHide.push(next);
                    curr = next;
                    stop = false;
                    if (next == undefined) {
                        toHide.push(next);
                        stop = true;
                    }
                }


            } while (stop == false);






            for (var i = 0; i < toHide.length; i++) {
                $("#" + toHide[i].id).slideUp();
            }


            if ($(toHide[toHide.length]).hasClass("active")) {
                $("#" + toHide[toHide.length].id + ".l2").trigger("click");
            }
        }


    });




    $(".l2").click(function(e) {
        //debugger;


        if ($(e.currentTarget).hasClass("active") == false) {


            $(e.currentTarget).addClass("active");




            var curr = e.currentTarget,
                next, stop;
            var toShow = [];
            do {
                next = $(curr).next()[0];
                if ($(next).hasClass("l1") || $(next).hasClass("l2") || next === undefined) {
                    stop = true;


                    if ($(curr).hasClass("l1") || $(curr).hasClass("l2")) {
                        redirectTo($(e.currentTarget).attr("id"));
                    }
                } else {


                    toShow.push(next);
                    curr = next;
                    stop = false;


                }
            } while (stop == false);


            for (var i = 0; i < toShow.length; i++) {


                $("#" + toShow[i].id).slideDown();


            }
        } else if ($(e.currentTarget).hasClass("active")) {


            $(e.currentTarget).removeClass("active");




            var curr = e.currentTarget,
                next, stop;
            var toHide = [];


            do {
                next = $(curr).next()[0];
                if ($(next).hasClass("l1") || $(next).hasClass("l2") || next === undefined) {


                    //toHide.push(next);


                    stop = true;
                } else {
                    toHide.push(next);
                    curr = next;
                    stop = false;
                }
            } while (stop == false);




            for (var i = 0; i < toHide.length; i++) {
                $("#" + toHide[i].id).slideUp();
            }
        }
    });


    $(".linker").click(function(e) {


        redirectTo($(e.currentTarget).attr("id"));


    });




    $(".T1").click(function(e) {


        var eid = e.currentTarget.id.replace("T1.", "");
        redirectTo(eid);


    });


    $(".T2").click(function(e) {


        var eid = e.currentTarget.id.replace("T2.", "");


        redirectTo(eid);


    });


    //redirectTo($(e.currentTarget).attr("id"));


}

Il mio problema è che quando clicco ad esempio su un accordion in cui di livello 1 (l1) prima di aprirsi ad esempio i 3 sottolivelli (l2) si vedono le 3 linee degli accordion che si stanno per aprire per un secondo prima di aprirsi del tutto, questo avviene con l'animazione dello slideDown, non avviene invece con .show... ma senza anzimazione non è bello da vedere e volevo chiedervi se c è un modo di superare questo ritardo nell' apertura dell'accordion in questo punto:

codice:
 for (var i = 0; i < toShow.length; i++) {


                if (($("#" + toShow[i].id).hasClass("l2")) && (flag == 2)) {


                    $("#" + toShow[i].id).slideDown()


                } else if (flag == 3) {


                    var linker = document.getElementsByClassName("linker");


                    $("#" + toShow[i].id).slideDown();
/*CON SLIDEDOWN AVVIENE IL BUG , CON .SHOW NO, MA IO VOGLIO UN ANIMAZIONE CHE SCORRA*/


                }


            }
Help me!!!