Bootstrap accordion open one at a time

Question

I have created a accordion and its in a loop but i want only one accordion open at a time not multiple one. I have used data parent attribute of bootstrap but its not working. Any kind of help would be highly appreciated. I want only one accordion open at one time. How to achieve it. I think i'm having this problem because of for each loop. Is there any way to solve it ?

Here is my code :

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

Try putting your #panels div outside the foreach loop - that way they are all in the same group.

Also, your #panels div should not have the "#" sign in its 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 ?>

Here is the working version with the PHP stripped out: https://jsfiddle.net/ytcw2sot/