ブートストラップアコーディオンが一度に1つずつ開きます

Question

アコーディオンとそのループを作成しましたが、複数のアコーディオンではなく1つのアコーディオンのみを開いてください。私はdata parentブートストラップの属性を使用していますが、動作しません。どんな種類の助けでも高く評価されます。 一度に開いたアコーディオンは1つだけです。それを達成する方法。私は各ループのために私はこの問題を抱えていると思う。それを解決する方法はありますか？

は、ここに私のコードです：

<?php if(!empty($tickets)) : ?> 

      <?php foreach($tickets as $ticket) : ?> 



     <div class="panel-group-custom" id="#panels"> 



      <div class="panel panel-default mb-0 no-border"> 

       <div class="panel-heading.panel-heading-custom" > 
       <h4 class="panel-title"> 
        <div data-toggle="collapse" data-parent="#panels" data-target="#collapse<?php echo $ticket['SupportTicket']['id'] ?>" class="accordion-title"> 

         <div class="row"> 

          <div class="overflow-hidden"> 

           <div class="col-md-2"> 
            <span class="ticket-heading1" title="Ticket ID"><i class="fa fa-ticket" aria-hidden="true"></i> <?php echo $ticket['SupportTicket']['ticket_id']; ?> </span> 
           </div> 
           <div class="col-md-7"><span class="ticket-title"><?php echo $ticket['SupportTicket']['title'] ?></span></div> 
           <div class="col-md-2"> 
            <span class="ticket-heading2" title="Ticket created on"><i class="fa fa-calendar" aria-hidden="true"></i> 
         <?php $bdate = date_create($ticket['SupportTicket']['modified']); ?>  
         <?php echo date_format($bdate,"d-M-Y") ?>   


            </span> 
           </div> 
           <div class="col-md-1"> 
            <span class="accordion-down"> 
            <i class="fa fa-chevron-down dropdown-toggle down-arrow2" aria-hidden="true"></i> 
           </span> 
           </div> 

          </div> 

         </div> 

        </div> 

       </h4> 
       </div> 


       <div id="collapse<?php echo $ticket['SupportTicket']['id'] ?>" class="panel-collapse collapse"> 
        <div class="panel-body"> 
         <div class="hidden-overflow ticket"> 
          <div class="full-width hidden-overflow ticket-chat"> 
           <p class="color-4 ticket-content"> 
            <?php echo $ticket['SupportTicket']['description'] ?>         
           </p> 
           <?php if($ticket['SupportTicket']['status']>1) : ?> 


           <p class="color-1 pull-right ticket-content"> <span class="resolution">Feedback</span>     
            <?php echo $ticket['SupportTicket']['resolution_text']; ?> 
            <span class="ticket-updated"><span class="bolder"><i class="fa fa-clock-o" aria-hidden="true"></i> 
              <?php $bdate = date_create($ticket['SupportTicket']['modified']); ?>  
              <?php echo date_format($bdate,"d-M-Y") ?>   
             </span></span> 
            </p> 
            <?php endif ?> 
          </div> 
          <div class="full-width hidden-overflow mt-5"> 

          <!-- <p class="ticket-close"><i class="fa fa-window-close" aria-hidden="true"></i> Closed on <span class="bolder">17-Aug-2017 </span></p>--> 
          </div> 
         </div> 
        </div> 
       </div> 

      </div> 

     </div> 


      <?php endforeach ?> 


     <?php else : ?> 
No Records 

    <?php endif ?> 

Answer 1

foreachループの外で、あなたの#panelsのdivを入れてみてください - 彼らは同じグループ内のすべてのですそのように。

#panels divには、そのIDに「＃」記号を付けるべきではありません。ここで

<?php if(!empty($tickets)) : ?> 
    <div class="panel-group-custom" id="panels"><!-- Remove the '#' from here. --> 
     <?php foreach($tickets as $ticket) : ?> 
     <div class="panel panel-default mb-0 no-border"> 
      <div class="panel-heading panel-heading-custom" ><!-- and remove the . from here. --> 
      <h4 class="panel-title"> 
       <div data-toggle="collapse" data-parent="#panels" data-target="#collapse<?php echo $ticket['SupportTicket']['id'] ?>" class="accordion-title"> 
        <div class="row"> 
         <div class="overflow-hidden"> 
          <div class="col-md-2"> 
           <span class="ticket-heading1" title="Ticket ID"><i class="fa fa-ticket" aria-hidden="true"></i> <?php echo $ticket['SupportTicket']['ticket_id']; ?> </span> 
          </div> 
          <div class="col-md-7"><span class="ticket-title"><?php echo $ticket['SupportTicket']['title'] ?></span></div> 
          <div class="col-md-2"> 
           <span class="ticket-heading2" title="Ticket created on"><i class="fa fa-calendar" aria-hidden="true"></i> 
            <?php $bdate = date_create($ticket['SupportTicket']['modified']); ?>  
            <?php echo date_format($bdate,"d-M-Y") ?>   
           </span> 
          </div> 
          <div class="col-md-1"> 
           <span class="accordion-down"> 
           <i class="fa fa-chevron-down dropdown-toggle down-arrow2" aria-hidden="true"></i> 
          </span> 
          </div> 
         </div> 
        </div> 
       </div> 
      </h4> 
      </div> 
      <div id="collapse<?php echo $ticket['SupportTicket']['id'] ?>" class="panel-collapse collapse"> 
       <div class="panel-body"> 
        <div class="hidden-overflow ticket"> 
         <div class="full-width hidden-overflow ticket-chat"> 
          <p class="color-4 ticket-content"> 
           <?php echo $ticket['SupportTicket']['description'] ?>         
          </p> 
          <?php if($ticket['SupportTicket']['status']>1) : ?> 
          <p class="color-1 pull-right ticket-content"> <span class="resolution">Feedback</span>     
           <?php echo $ticket['SupportTicket']['resolution_text']; ?> 
           <span class="ticket-updated"><span class="bolder"><i class="fa fa-clock-o" aria-hidden="true"></i> 
             <?php $bdate = date_create($ticket['SupportTicket']['modified']); ?>  
             <?php echo date_format($bdate,"d-M-Y") ?>   
            </span></span> 
           </p> 
           <?php endif ?> 
         </div> 
         <div class="full-width hidden-overflow mt-5"> 
         <!-- <p class="ticket-close"><i class="fa fa-window-close" aria-hidden="true"></i> Closed on <span class="bolder">17-Aug-2017 </span></p>--> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
     <?php endforeach ?> 
    </div><!-- end #panels (moved to after the foreach) --> 
<?php else : ?> 
    No Records 
<?php endif ?> 

取り除かPHPでの作業バージョンです：https://jsfiddle.net/ytcw2sot/