Таблица MYSQL в свернутом аккордеоне не отображается

Я генерирую таблицу HTML из БД mysql, используя php (v7.1), и отображаю ее в аккордеоне boostrap (v3.3.7); чтобы «поиграть» со столбцами таблицы, я также использую Tablesorter (v 2.30).

Пока я использую collapse in класс, все в порядке, но если я хочу, чтобы таблица была скрыта по умолчанию и использовать collapse вместо этого, когда я щелкаю, чтобы расходовать его, открывается вкладка с правильным размером, но не показывает никакого содержимого. Если я нажму F12 или F11, появится содержимое таблицы.

HTML контент

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="heading1">
<h4 class="panel-title">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse1" aria-expanded="true" aria-controls="collapse1">
<span style="color: black; font-size:10px"><strong>List all subscriotion forms <?php echo ( "(" . $TblSize . " volunteers)" ) ?></strong> (click to show/hide)</span>
</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="heading1">

"...My php code to display the table content here... (see below)"
<div class="panel-body">
</div>
</div>-->
</div>-->
</div>-->

Содержание TableSorter (фактически сгенерированный с использованием echo (\t\t text \n); в разделе PHP)

<script>
$(function() {
$("#TblVolDet").tablesorter( {
//defaults,
theme: 'blue',
saveSort: 'true',
showProcessing: 'true',
headerTemplate : '{content} {icon}',
widgets: [ 'uitheme', 'zebra', 'scroller' ],
widgetOptions: {
filter_liveSearch: true,
scroller_height: 500,
scroller_jumpToHeader: true,
scroller_upAfterSort: false,
scroller_barWidth: null
},
dateFormat: "ddmmyyyy"});

if ( $('.focus-highlight').length ) {
$('.focus-highlight').find('td, th')
.attr('tabindex', '1')
// add touch device support
.on('touchstart', function() {
$(this).focus();
});
}

});

</script>

Вот и результат mysqli (также используя echo (...); CMD)

      <table class="table table-responsive table-hover table-condensed tablesorter focus-highlight hover-highlight" id="TblVolDet" style="font-size:11px;" title="Shift + click to sort on several columns" width="100%"> <!-- Beginning of ''table class=''table table-responsive'''' -->
<thead>
<tr>
<th>Col1</th>
<th>Col2</th>
<th>Col3</th>
<th>Col4</th>
<th>Col5</th>
</tr>
</thead>
<tbody>
<tr>
<td>Text1</td>
<td style='color: green; font-weight: bold;'>Text2</td>
<td style='color: green; font-weight: bold;'>Text3</td>
<td style='color: black; font-weight: normal;'>Text4</td>
<td style='color: green; font-weight: bold;'>Text5</td>
</tr>
</tbody>
</table>