Bootstrap Akkordeon falsches Verhalten

Question

Ich habe (was soll) ein ziemlich einfaches Akkordeon, das sich sehr seltsam verhält. Hier ist der HTML:

<div class="panel-group" id="accordion" style="width:100%;margin:0 1% 0 1%;padding:0 0 5px 0;text-align:center"> 
    <div class="panel panel-default"> 
     <div class="panel-heading"> 
      <h4 class="panel-title"> 
       <a data-toggle="collapse" data-parent="#accordion" href="#main/#Public_Home_Why_Body"> 
        <h3 id="Public_Home_Why"> 
         <strong> 
          {{Landing_Page_Messages.Why_Title}} 
         </strong> 
        </h3> 
       </a> 
      </h4> 
     </div> 
     <div id="Public_Home_Why_Body" class="panel-collapse collapse in"> 
      <div class="panel-body" style=";text-align:justify"> 
       <font size="4"> 
        {{Landing_Page_Messages.Why_Body}} 
       </font> 
      </div> 
     </div> 
    </div> 
    <div class="panel panel-default"> 
     <div class="panel-heading"> 
      <h4 class="panel-title"> 
       <a data-toggle="collapse" data-parent="#accordion" href="#main/#Public_Home_What_Body"> 
        <h3 id="Public_Home_Why"> 
         <strong> 
          {{Landing_Page_Messages.What_Can_Do_Title}} 
         </strong> 
        </h3> 
       </a> 
      </h4> 
     </div> 
     <div id="Public_Home_What_Body" class="panel-collapse collapse"> 
      <div class="panel-body" style=";text-align:justify"> 
       <font size="4"> 
        {{Landing_Page_Messages.What_Can_Do_Body}} 
       </font> 
      </div> 
     </div> 
    </div> 
    <div class="panel panel-default"> 
     <div class="panel-heading" id="Public_Home_How"> 
      <h4 class="panel-title"> 
       <a data-toggle="collapse" data-parent="#accordion" href="#main/#Public_Home_How_Body"> 
        <h3 id="Public_Home_Why"> 
         <strong> 
          {{Landing_Page_Messages.How_Does_it_Title}} 
         </strong> 
        </h3> 
       </a> 
      </h4> 
     </div> 
     <div id="Public_Home_How_Body" class="panel-collapse collapse"> 
      <div class="panel-body" style=";text-align:justify"> 
       <font size="4"> 
        {{Landing_Page_Messages.How_Does_it_Body}} 
       </font> 
      </div> 
     </div> 
    </div> 
    <div class="panel panel-default"> 
     <div class="panel-heading" id="Public_Home_Your_Role"> 
      <h4 class="panel-title"> 
       <a data-toggle="collapse" data-parent="#accordion" href="#main/#Public_Home_Your_Role_Body"> 
        <h3 id="Public_Home_Your_Role"> 
         <strong> 
          {{Landing_Page_Messages.Your_Role_Title}} 
         </strong> 
        </h3> 
       </a> 
      </h4> 
     </div> 
     <div id="Public_Home_Your_Role_Body" class="panel-collapse collapse"> 
      <div class="panel-body" style=";text-align:justify"> 
       <font size="4"> 
        {{Landing_Page_Messages.Your_Role_Body}} 
       </font> 
      </div> 
     </div> 
    </div> 
</div> 

Wenn die Seite geöffnet wird, die erste „Ordner“ das Akkordeon geöffnet ist (statt geschlossen). Jedes Feld, auf das ich klicke, bewirkt, dass der Eintrag FIRST geöffnet und geschlossen wird, aber der Hauptteil des Felds, auf das ich geklickt habe, bleibt ausgeblendet.

Ich habe offensichtlich einige Tippfehler, aber ... nach dem erneuten Lesen kann es Dutzende Male nicht finden.

Kann jemand es überprüfen und auf meinen Fehler hinweisen?

Vielen Dank im Voraus!

Answer 1

Das Problem gefunden !!!

Irgendwo im Code war ein anderes Element mit dem gleichen Namen wie eine der Platten des Akkordeons. Ehrlich gesagt, ich fand es zufällig (!).

Dies erklärt auch, warum der Test von Skelly und ProgrammerV5 funktioniert hat (in dem Stück, das sie überprüft haben, gab es keinen Namenskonflikt).

Vielen Dank an diejenigen, die sich die Zeit genommen haben, es zu testen.