I have the following tables:
Categories: category_id, category_name
Products: id, category_id, product_name
I am using bootstrap 4, I want to show each category as a accordion title and list all products that belong to that category in the body of the accordion.
Using php 7
function getProducts(){
$db = new DB();
$rows = $db->db_select("SELECT category.category_id, category.category_name, products.id, products.category_id, products.product_name
FROM products
INNER JOIN category ON products.id = category.category_id
ORDER BY category.category_name
");
if($rows === false){
$error = db_error();
} else {
return $rows;
}
}
$data = new CORE();
$products = $data->getProducts();
<div class="accordion" id="accordionExample">
<? foreach($products as $p){ ?>
<div class="card">
<div class="card-header" id="headingOne">
<h5 class="mb-0">
<button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
<? echo $p['category_name'] ?>
</button>
</h5>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
<div class="card-body">
<? echo $p['product_name'] ?>
</div>
</div>
</div>
<? } ?>
</div>
Database Data: