ブートストラップアコーディオンの動作が正しくありません

Question

非常に奇妙な動作をするシンプルなアコーディオンがあります。

<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> 

ページが開くと、アコーディオンの最初の「フォルダ」が（閉じずに）開きます。私がクリックしたどのパネルでも、FIRSTエントリが開き、閉じることができますが、クリックしたパネルのボディは折りたたまれたままです。

私は明らかにいくつかのタイプミスを持っていますが...それを数回読み返してもそれを見つけることができません。

誰でも私のエラーにピンポイントを確認できますか？

事前に感謝します！

Answer 1

問題が見つかりました！

コードのどこかに、アコーディオンのパネルの1つと同じ名前の別の要素がありました。正直なところ、私は偶然にそれを見つけました（！）。

これは、SkellyとProgrammerV5で実行されたテストがなぜ動作したのか（なぜなら、そこでチェックした部分では名前の衝突がないことも）を説明します。

テストに時間がかかった人に感謝します。