bootstrap collapse foreach loop in php

Question

Мне тяжело использовать инструкцию foreach с крахом Bootstrap. Каждый раз, когда я нажимаю на последнюю или на первой панели, он всегда открывает другую панель вместо себя и сворачивает другую панель вместо себя.

<?php 
    $x = 0; 
    foreach($infos as $info): 
?> 

<form action="../../Core/init.php" method="POST"> 

    <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"> 
     <div class="panel panel-default" role="tab" id="heading<?php echo $x; ?>"> 
     <div class="panel-heading" > 
      <h4 class="panel-title"> 
      <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse<?php echo $x; ?>" aria-expanded="false" aria-controls="collapse<?php echo $x; ?>"> 

       <?php echo strtoupper($fname); ?> 

      </a> 
      </h4> 
     </div> 
     <div id="collapse<?php echo $x; ?>" class="panel-collapse <?php echo ($x == 0 ? 'collapse in' : 'collapse'); ?>" role="tabpanel" aria-labelledby="heading<?php echo $x; ?>"> 
      <div class="panel-body"> 

       <div class="form-group"> 
        <label class="control-label" for="inputWarning"> Name</label> 
        <input type="text" class="form-control" value="<?php echo $name; ?>" readonly> 
       </div> 

       <div class="form-group"> 
        <label class="control-label">Age</label> 
        <input type="text" class="form-control" value="<?php echo $age; ?>" readonly> 
       </div> 

       <div class="form-group"> 
        <label class="control-label"></label> 
        <textarea class="form-control" rows="6" id="textArea" name="message" maxlength="1000"></textarea> 

       </div> 

       <button class="btn btn-block btn-lg btn-danger" name="message" >Submit</button> 

      </div> 
     </div> 
     </div> 
    </div> 
</form> 

<?php $x++; endforeach;?> 

Answer 1

Следующая строка (и принадлежность </div>) должны быть вне вашего foreach цикла, потому что это обертка для вашего полного аккордеона и должны быть добавлены для каждого элемента в вашем $infos массиве.

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"> 

Вот пример в начальной загрузки документации: http://getbootstrap.com/javascript/#collapse-example-accordion