forループ内でのブートストラップの崩壊php

Question

PHP forループでブートストラップアコーディオンが欲しいです。しかし、それは崩壊しません。私は何が間違っているのか分かりません。

ここに私のコード。

<?php 
$row_count = 1; 
for ($x = 0; $x < 5; $x++) { 

    echo $row_count ; 
    ?> 


    <div class="panel-group" id="accordion"> 
    <div class="panel panel-default"> 
     <div class="panel-heading"> 
     <h4 class="panel-title"> 
      <a data-toggle="collapse" data-parent="#accordion" href="#collapse1<?php echo $row_count; ?>">Collapsible Group 1</a> 
     </h4> 
     </div> 
     <div id="collapse1<?php echo $row_count ?>" class="panel-collapse collapse "> 
     <div class="panel-body">Lorem.</div> 
     </div> 
    </div> 
    </div> 


    <?php 
$row_count ++; 
} 

?> 

Answer 1

は、以下のようにコードを書き換え

： -

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"> 
<?php 
$row_count = 1; 
for ($x = 0; $x < 5; $x++) { ?> 

    <div class="panel panel-default" > 
     <div class="panel-heading" role="tab" id="heading<?php echo $row_count ?>"> 
     <h4 class="panel-title"> 
      <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse<?php echo $row_count; ?>" aria-expanded="false"">Collapsible Group <?php echo $row_count?></a> 
     </h4> 
     </div> 
     <div id="collapse<?php echo $row_count; ?>" class="panel-collapse collapse " role="tabpanel" aria-labelledby="heading<?php echo $row_count; ?>"> 
     <div class="panel-body">Lorem.</div> 
     </div> 
    </div> 

<?php $row_count++; } ?> 
</div> 

Answer 2

だけでパネルグループがループの `outside`すべきではない。この

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"> 
<?php 
$row_count = 1; 
for ($x = 0; $x < 5; $x++) { 
    ?> 
    <div class="panel panel-default"> 
    <div class="panel-heading" role="tab" id="headingOne<?=$row_count?>"> 
     <h4 class="panel-title"> 
     <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne<?=$row_count?>" aria-expanded="false" aria-controls="collapseOne<?=$row_count?>"> 
      Collapsible Group Item #1 
     </a> 
     </h4> 
    </div> 
    <div id="collapseOne<?=$row_count?>" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne<?=$row_count?>"> 
     <div class="panel-body"> 
     Lorem 
     </div> 
    </div> 
    </div> 
    <?php 
$row_count ++; 
} 
?> 
</div>