Bonjour à tous ! 

Le contexte :

J'ai 4 boucles imbriquées ! 
Mon but est de faire des liste déroulante à chaque fois qu'un secteur est trouvé ! 

Voici mon code xml pour le front: 

<t t-foreach="orga_lvl1" t-as="i">
    <div class="list_deroul1" onclick="toggleDiv1()">
        <span class="fleche_requests1"/>
        <span><t t-esc="i[1]"/></span>
        <span></span>
    </div>
    <t t-set="filtre1" t-value="i[0]"/>
    <t t-foreach="filter((lambda c: c[2] == filtre1), organigramme)" t-as="j">
        <div class="list_deroul2" onclick="toggleDiv2()">
            <span class="fleche_requests2"/>
            <span><t t-esc="j[1]"/></span>
            <span></span>
        </div>
        <t t-set="filtre2" t-value="j[0]"/>
        <t t-foreach="filter((lambda c: c[2] == filtre2), organigramme)" t-as="k">
            <div class="list_derou3" onclick="toggleDiv3()">
                <span class="fleche_requests3"/>
                <span><t t-esc="k[1]"/></span>
                <span></span>
            </div>
            <!--Ce niveau 4 est obsolète dnas notre organigramme. Il servirait s'il y avait un 4è niveau-->
            <t t-set="filtre3" t-value="k[0]"/>
            <t t-foreach="filter((lambda c: c[2] == filtre3), organigramme)" t-as="l">
                <div class="list_deroul4" onclick="toggleDiv4()">
                    <span class="fleche_requests4"/>
                    <span><t t-esc="l[1]"/></span>
                    <span></span>
                </div>
            <!--Fin Niveau4-->
            </t>
        </t>
    </t>

La fonction ToggleDiv.() permet d'afficher ou de cacher la Div du dessous :

Code JS :

/* ANIMATION LISTE DEROULANTE UNE*/
var toggle = false;
function toggleDiv1(){
    if (!toggle){
        toggle = true;
        var elmt = document.getElementsByClassName("list_deroul2");
        var elmtFleche = document.getElementsByClassName('fleche_requests1');
        var i;
        for (i=0; i<elmt.length; i++){
            elmt[i].style.display = "block";
        }

        for (i=0; i<elmtFleche.length; i++){
            elmtFleche[i].style.transform = "rotate(90deg)";
        }
        return;
    }

    if (toggle){
        toggle = false;
        var elmt = document.getElementsByClassName("list_deroul2");
        var elmtFleche = document.getElementsByClassName('fleche_requests1');
        var i;
        for (i=0; i<elmt.length; i++){
            elmt[i].style.display = "none";
        }

        for (i=0; i<elmtFleche.length; i++){
            elmtFleche[i].style.transform = "inherit";
        }
        return;
    }
}

Cependant, le problème est qu'il y peut y avoir plusieurs résultats trouvés dans la Div dont le nom de la classe est "list_deroul1" et idem pour les autres. Donc si je clique sur une de ses Div, toute les autres Div s'ouvre puisque le résultat a été trouvé plusieurs fois

Je pensais à incrémenter une variable pour le nom de ma fonction onclick(). Ou peut être que je ne prends pas la bonne méthode ! 

Voici le résultat avant clic :

Voici le résultat après clic : (Ne pas regarder les flèches des div interne )

Pourriez vous m'aidez ? 

Merci beaucoup ! 

-
Edité par KévinH 3 octobre 2019 à 8:55:03