dynamic tab bootstrap creation doesn't work well - php

Question

I created a dynamic bootstrap tab with a specific tab to insert in the administration inside description field.
The problem when I want to display the information inside the catalog, it display in the first tab all the text
If I click on the tab I have no problem, the information is correct after
<tabCatalog> and </tabCatalog> are the element allow to create the dynamic tab on the catalog include include inside the text.
$desc = $this->getProductsDescription();
$product_tab_title = '<div id="categoriesTabs" style="overflow: auto;">';
$product_tab_title .='<ul class="nav nav-tabs flex-column flex-sm-row" role="tablist" id="myTab">';
if (strpos($desc, '<tabCatalog>') !== FALSE) {
$cut = explode('<tabCatalog>', trim($desc));
$c = 0;
foreach ($cut as $k => $part) {
if (trim($part) != '') {
if (strpos($part, '</tabCatalog>') !== FALSE) {
$t = substr($part, 0, strpos($part, '</tabCatalog>'));
if ($k = 0) {
$class = 'nav-link active';
} else {
$class = 'nav-link';
}
$product_tab_title .= '<li class="nav-item">' . $t . '</li>';
}
}
$c++;
}
}
$product_tab_title .= '</ul>';
$product_tab_title .= '</div>';
$product_tab_description = '<div>';
$product_tab_description .= '<div class="tab-content">';
if (strpos($desc, '<tabCatalog>') !== FALSE) {
$cut = explode('<tabCatalog>', trim($desc));
$n = 0;
foreach ($cut as $n => $part) {
if (trim($part) != '') {
if (strpos($part, '</tabCatalog>') !== FALSE) {
$r = substr($part, strpos($part, '</tabCatalog>') + 13);
$product_tab_description .= '<div class="tab-pane active" id="tab' . $n . '">' . $r . '</div>';
}
}
$n++;
}
}
// content tab
$products_description_content = '<!-- Start products_description_tab -->' . "\n";
$products_description_content .= '<div class="col-md-' . $content_width .'">';
$products_description_content .= '<div class="separator"></div>';
$products_description_content .= '<div class="contentText">';
$products_description_content .= $product_tab_title;
$products_description_content .= $product_tab_description;
$products_description_content .= '<div>';
$products_description_content .= '<div>';
$products_description_content .= '<div>';
$products_description_content .= '<div>';
$products_description_content .= '<!-- end products_description_tab -->' . "\n";
echo $products_description_content

Answer 1

Both tabs have the active class...
foreach ($cut as $n => $part) {
if (trim($part) != '') {
if (strpos($part, '</tabCatalog>') !== FALSE) {
$r = substr($part, strpos($part, '</tabCatalog>') + 13);
$product_tab_description .= '<div class="tab-pane active" id="tab' . $n . '">' . $r . '</div>';
}
}
$n++;
}
I suggest you to remove active from the class list in that loop and add that tiny jQuery script on document ready:
$(document).ready(function(){
$(".tab-pane").first().addClass("active");
});
Or .eq(1) (zero-based) instead of .first() if you prefer having the second tab active on page load.