1

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 ?>
Improve this question
1

1 Answer 1

Reset to default
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/

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.