Bootstrap Accordeon inside php loop not diplay correctly - php

Question

I tried to make an accordeon menu, but when I click on the menu it does not expand. I follow an example that it works well. Maybe I make a mistake somewhere I think
Note : I have just a category and one sub category, not more
Main Category
sub Category One
sub Category two
2nd Main Category
sub Category One
sub Category two
Below my php code :
<div class="accordion" id="accordionExample">
<?php
$i = 0;
if (is_array($categories)) {
foreach($categories as $racine) {
$i++;
?>
<?php
if($categories[0]) {
?>
<div class="accordion-item">
<h2 class="accordion-header" id="heading<?php echo $i; ?>">
<?php
if ($i == 1 || $i == 16) {
$button = '<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapse'. $i .'" aria-expanded="true" aria-controls="collapse'. $i .'">';
} else {
$button = '<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse' . $i . '" aria-expanded="false" aria-controls="collapse' . $i . '">';
}
?>
<?php echo $button; ?>
<?php echo $racine['text']; ?>
</button>
</h2>
</div>
<?php
}
?>
<?php
}
}
?>
</div>
the html code. I think my problem could be inside the loop ?
<div class="accordion" id="accordionExample">
<div class="accordion-item">
<h2 class="accordion-header" id="heading1">
<button class="accordion-button show" type="button" data-bs-toggle="collapse" data-bs-target="#collapse1" aria-expanded="true" aria-controls="collapse1">Apps</button>
</h2>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="heading2">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse2" aria-expanded="false" aria-controls="collapse2"> Apps Catalog</button>
</h2>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="heading3">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse3" aria-expanded="false" aria-controls="collapse3"> Apps Communication</button>
</h2>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="heading4">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse4" aria-expanded="false" aria-controls="collapse4"> Apps Configuration</button>
</h2>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="heading5">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse5" aria-expanded="false" aria-controls="collapse5"> Apps Customers</button>
</h2>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="heading16">
<button class="accordion-button show" type="button" data-bs-toggle="collapse" data-bs-target="#collapse16" aria-expanded="true" aria-controls="collapse16">Hooks</a> </button>
</h2>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="heading17">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse17" aria-expanded="false" aria-controls="collapse17"> Modules Hooks Admin - Dashboard </button>
</h2>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="heading18">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse18" aria-expanded="false" aria-controls="collapse18"> Modules Hooks Import</button>
</h2>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="heading21">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse21" aria-expanded="false" aria-controls="collapse21"> Modules Hooks Cart</button>
</h2>
</div>
</div>
the function
public function getLabelTree(int|string $parent_id = '0', string $spacing = '', array|string $exclude = '', array|string $category_tree_array = '', bool $include_itself = false): array
{
if (!\is_array($category_tree_array)) {
$category_tree_array = [];
}
if ((\count($category_tree_array) < 1) && ($exclude != '0')) {
$category_tree_array[] = [
'id' => '0',
'text' => $this->upgrade->getDef('text_top')
];
}
if ($include_itself) {
$Qcategory = $this->upgrade->get('marketplace_categories', 'categories_name', ['id' => (int)$parent_id]);
$category_tree_array[] = [
'id' => $parent_id,
'text' => $Qcategory->value('categories_name')
];
}
$Qcategories = $this->upgrade->db->prepare('select categories_id,
categories_name,
parent_id
from :table_marketplace_categories
where parent_id = :parent_id
order by sort_order, categories_name
');
$Qcategories->bindInt(':parent_id', $parent_id);
$Qcategories->execute();
while ($Qcategories->fetch()) {
if ($exclude != $Qcategories->valueInt('categories_id'))
$category_tree_array[] = [
'id' => $Qcategories->valueInt('categories_id'),
'text' => $spacing . $Qcategories->value('categories_name')
];
$category_tree_array = $this->getLabelTree($Qcategories->valueInt('categories_id'), $spacing . ' ', $exclude, $category_tree_array);
}
return $category_tree_array;
}

Answer 1

As I said in my comments, for Bootstrap (V5.3) accordions to work you need an accordion-body.
Try the code below. This will print the "Main Category" in the accordion-header and each "Sub Category" as a list-item in the accordion-body. You can change/add HTML to your needs.
<?php
echo '<div class="accordion" id="accordionExample">';
$i = 0;
foreach ($categories as $racine) {
$i++;
// if Main Category
if ($i == 1 || $i == 16) {
if($i != 1) {
echo '</ul></div></div></div>';
}
echo '<div class="accordion-item"><h2 class="accordion-header" id="heading-' . $i .'"><button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-' . $i .'" aria-expanded="false" aria-controls="collapse-' . $i .'">' . $racine['text'] . '</button></h2>';
echo '<div id="collapse-'. $i .'" class="accordion-collapse collapse" aria-labelledby="heading-'. $i .'" data-bs-parent="#accordionExample"><div class="accordion-body"><ul>';
}
// if Sub Category
else {
echo '<li>' . $racine['text'] . '</li>';
}
}
echo '</ul></div></div></div>';
echo '</div>';
?>
Note that the line echo '</ul></div></div></div>' is used twice because we need close each accordion-item before a new accordion-item is printed, but also after the foreach() loop. Because your $category_tree_array array is one dimensional, there is no way to avoid this duplicate line.
A better way would be to make $category_tree_array a multidimensional array (inside your getLabelTree() function) and then use an inner foreach() to loop through the subcategories of each main category. Then you can avoid that duplicate line as well as the if ($i == 1 || $i == 16) { } statement altogether.
Let me know if you need any help with that. In any case, the code above should do the trick.
Good luck.