Buongiorno programmatori, ho un problema con uno script che riguarda il caricamento di un accordion multilivello che ha questa struttura:

codice:
<button class='l1'></button>
<button class='l2'></button>
<section class='linker'></linker>
<section class='linker'></linker>
<section class='linker'></linker>
<section class='linker'></linker>
<button class='l1'></button>
<button class='l2'></button>
<section class='linker'></linker>
<section class='linker'></linker>
<section class='linker'></linker>
<section class='linker'></linker>
<button class='l1'></button>
<button class='l2'></button>
<button class='l2'></button>
<button class='l2'></button>
<button class='l2'></button>
<section class='linker'></linker>
<section class='linker'></linker>
<button class='l1'></button>
<section class='linker'></linker>
<section class='linker'></linker>
Il problema è che questa struttura non può essere cambiata perchè arriva da un altro file dinamicamente e io devo creare un menu con come titolo principale tutti Gli l1 e fin qui tutto ok,
poi al click su l1 devo aprire "l' accordion" e se ci sono visualizzare tutti gli "l2" appena sotto l1 se no tutti i linker, se non ha l2 ma subito i linker apro linker ,
sono riuscito a fare ciò che mi serve 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 linker, l2 = [];
                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;
                    }
                    if ($(curr).hasClass(undefined) || next == undefined) {
                        stop = true;
                    }




                }
                while (stop == false);
                // console.log(l2);
                //è 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)) {

/*-------------QUI INIZIANO I MIEI PROBLEMI--------*/

//Il, problema è che al caricamento degli l2 ho un brutto effetto di ritardo nell' aprire gli l2

                        // console.log("l2");
                        /*  $("#" + toShow[i].id).slideDown({
                              duration: 100,
                              easing: "swing"
                          });*/
    /* $("#" + toShow[i].id).css("display", "block");
     $("#" + toShow[i].id).fadeIn(300);*/
    /*           } 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");
            }
        }


    });
Il problema è che così facendo il .slideDown() ha un brutto comportamento di apertura in ritardo e dell' intero blocco l2, io ho bisogno di avere come con linker (Che invece è fluidissimo) lo slideDown del menu l2 ma non ho idea di come fare!