Why Bootstrap Accordion is showing all the collapsible boxes?

Question

I am using BOOTSTRAP ACCORDIAN to show invited speakers in our website.

I am in Wordpress 4.8.

The code used addtionally is the following:

function toggleChevron(e) {
      var theAccordion = $('#accordion');
      $(e.target)
        .prev('.panel-heading')
        .find('i.indicator')
        .toggleClass('glyphicon-minus glyphicon-plus');
        //$('#accordion .panel-heading').css('background-color', 'green');
                theAccordion.find('.panel-heading').removeClass('highlight');
                $(e.target).prev('.panel-heading').addClass('highlight');
}
$('#accordion').on('hidden.bs.collapse', toggleChevron);
$('#accordion').on('shown.bs.collapse', toggleChevron);
$('#accordion').on('show.bs.collapse', function () {
    $('#accordion .in').collapse('hide');
});

I am getting the panel heading and body from a php:

PHP:

<div class="clearfix panel-group" id="accordion" >      
          <?php

        global $wpdb;
        $result = $wpdb->get_results( "SELECT * FROM  `Invited_Speakers_auto`;");
        foreach ( $result as $print )   { ?>
                           <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#<?php echo $print->Last_Name;?>">   <?php echo $print->First_Name;?> <?php echo $print->Last_Name;?>, <?php echo $print->Institute_Address;?>
        </a> </h4>
      </div>
      <div id="<?php echo $print->Last_Name;?>" class="panel-collapse collapse in">
        <div class="panel-body">
<img  style="border-radius: 10%; padding: 10px; float: left;" src="<?php echo $print->Image_link;?>" alt="" width="20%" align="middle" />

<table style="width:79%;float: right;">
<tbody>

<td ><?php echo $print->Designation;?>  </td>
</tr>
<tr>
<td style="display:block; width:50%;"><?php echo $print->Department_Address;?></td>
</tr>

<tr>
<td> Email Id: <?php echo $print->Email_Id;?> </td>
</tr>
</tbody>
</table>

<table>
<tbody>
<tr>
<td >Research Interests</td>
<td>:</td>
<td> <?php echo $print->Research_Interests;?></td>
</tr>
<tr>
<td>
Achievements
</td>
<td> : </td>
<td> <?php echo $print->Acheivements;?> 
<button style="float:right;"><a style="color: white;" href="Home_page_Link" target="_blank" rel="noopener"> More Info </a> </button>
</td>
</tr>
</tbody>
</table>

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

            <?php } ?>

  </div>

When I am running the above code, all works fine except the following issue:

1. All collapsible body is opened when the page gets refreshed.

2. For successive double click on any panel-heading all settle down normally.

What is the problem?

I dont want any of the body should open when the page gets refreshed. Only when the user click one of the panel heading, the corresponding panel-body should be displayed and the rest should remain invisible.

PS: I have added all the javascript files at the footer.

Is that a problem??

Is it a running error?

Kindly clarify this. Click here to visit the page. In that Invited Speaker section has this problem.

Thank you in advance.

Answer 1

Try removing the in class from the panel-collapse element. Bootstrap adds this automatically when opening an expander panel - having this class set by default causes each panel to appear open.