Accordion Bootstrap tout ouvert au démarrage

Bonjour à toutes et à tous,

J'ai mouliné un accordéon Bootstrap 5.2.3 avec deux boucles FOR imbriquées, en PHP (mixé d'HTML). La principale me sert les "rayons" l'autre les "plats".
Toutes ces données sont stockées dans une bdd MySQL et deux requêtes alimentent ma moulinette ; une pour sortir toutes données du menu (id, rayons, plats, descr...) et une autre pour faire le compte du Nb de plats dans chaque rayon.

Tout cela fonctionne, tout s'affiche correctement dans le bon ordre et avec toutes les données désirées ...
Mais... quand j'arrive sur ma page tous les éléments sont déployés !
Mais... si je clique sur un btn pour le fermer, puis une deuxième fois pour le re-ouvrir tout se met en place comme je le désire, soit tous contenus fermés.
Donc ça marche mais ça marche pas !
Je me suis usé les yeux, cassé la tête, cherché sur le Net à en avoir la nausée mais je n'ai rien trouvé.

Quelqu'un aurait une idée, voir la solution, à me transmettre ?
Merci d'avance pour vos réponses et bonne journée à toutes et à tous.

PS : j'ai mis le code (pas terminé... qqs détails) parce que je pensais qu'on me le demanderait, mais le vrai Pb c'est que tout est OK (rien dans la console Chrome) sauf que... tout est ouvert à l'affichage de la page.

$req2 = $bdd->prepare("SELECT count(*) FROM plats WHERE rayon = ?");
  // JE DECLARE MON TABLEAU DU NOMBRE DE PLATS PAR TYPE DE PLAT
  $nb_plats = array();
  // J'EXECUTE MA REQUETE EN BOUCLE ET JE POUSSE LE Nb DE PLATS DANS MON TABLEAU
  for ($i=0; $i < 12  ; $i++) {
    $req2->execute([$rayon[$i]]);
    $count = $req2->fetchColumn();
    $nb[$i] = $count;
    array_push($nb_plats, $nb[$i]);
  }
  // BOUCLE PRINCIPALE POUR CREER L'ACCORDEON COMPLET
  $z = 0; //indicateur du nombre total des plats
  echo "<div class=\"accordion\" id=\"accordionPlats\">"; // tête de l'accordeon

  for ($i=0; $i < 12; $i++) // boucle principale de construction des accordeons
  {
    echo "<div class=\"accordion-item\">
          <h2 class=\"accordion-header\" id=\"heading".$i."\">
          <button class=\"accordion-button p_bkgC\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#collapse".$i."\" aria-expanded=\"false\" aria-controls=\"collapse".$i."\">
          <p class=\"p_fff2_bold\"> ".$rayon[$i]." - <span class=\"p_fff3_bold\">".$nb[$i]." dishes</span></p>
          </button>
          </h2>";
    // BOUCLE SECONDAIRE POUR ECRIRE LES DATAS DES PLATS
    for ($a=0; $a < $nb[$i]; $a++)
    {
      // MODAL POUR CHOISIR SI SEULEMENT MODIF DU PRIX OU MODIF DES DONNEES D'UN PLAT
      echo "<div id=\"collapse".$i."\" class=\"accordion-collapse collapse show\" aria-labelledby=\"headingPlats\" data-bs-parent=\"#accordionPlats\">
            <div class=\"accordion-body pt-0 pb-0\">
            <!-- MODAL CHANGE PRIX-->
            <div class=\"modal fade\" id=\"modal_".$z."\" tabindex=\"-1\" aria-labelledby=\"connect\" aria-hidden=\"true\">
            <div class=\"modal-dialog\">
            <div class=\"modal-content\">
            <div class=\"modal-header p_btn_accor\">
            <h1 class=\"modal-title fs-5\" id=\"connect\">Change price modal</h1>
            <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button>
            </div>
            <div class=\"modal-body\">
            <form class=\"\" action=\"\" method=\"post\">
            <div class=\"input-group mb-3\">
            <span class=\"input-group-text\" id=\"basic-addon1\"></span>
            <input type=\"text\"  class=\"form-control\" name=\"nickname\" value=\"\" placeholder=\"Like XX,xx€\" aria-label=\"Username\" aria-describedby=\"basic-addon1\">
            </div>
            <div class=\"modal-password\">
            <input class=\"btn btn-primary\" type=\"submit\" value=\"Save\">
            </div>
            </form>
            </div>
            </div>
            </div>
            </div>";
            // LES ELEMENTS CONCERNANT CHAQUE PLAT
            $datas[$z]["mention"]="non"?$oui_non="no info":$oui_non="infos";
            echo "<div class=\"col-12 input-group ml-3\">
            <div class=\"w-100 box p_fff_bold ps-2\">".$datas[$z]["nom_plat"]."</div>
            <div class=\"w-100 box p_blue_bold ps-2\">".$datas[$z]["description"]."</div>
            <div class=\"w-100 box p_blue_bold ps-2\">".$datas[$z]["prix"]."</div>
            <div class=\"w-100 box p_blue_bold ps-2\">".$oui_non."</div>
            <div class=\"column w-100 d-flex justify-content-around bd-highlight mb-0 p_btn_accor\">
            <!-- BOUTON DU MODAL DE CHANGEMENT DE PRIX -->
            <div class=\"p-2 bd-highlight\">
            <button type=\"button\" class=\"btn btn-success\" data-bs-toggle=\"modal\" data-bs-target=\"#modal_".$z."\">
            Change price
            </button>
            </div>
            <!-- BOUTON VERS MODIFICATION DES DONNEES D'UN PLAT -->
            <div class=\"p-2 bd-highlight\">
            <button name=\"saisies\" value=\"1\" class=\"btn btn-warning mr-2\" type=\"submit\">
            Modify dish
            </button>
            </div>
            </div>
            </div>
            <hr class=\"mt-0\">
            </div>
            </div>";
      $z++; // indicateur pour passer d'un plat au suivant
    } // fin de la boucle listant les caractéristiques des plats
    echo "</div>";
  } // fin de boucle principale
  echo "</div>"; // fin de l'accordéon

Modifié par Petitapeti (29 Apr 2025 - 11:05)