Core PHP How To Create Dynamic Bootstrap Accordion
<?php
define('DB_SERVER', "localhost");
define('DB_USER', "root");
define('DB_PASS', "");
define('DB_DATABASE', "nafs");
$con = mysqli_connect(DB_SERVER, DB_USER, DB_PASS, DB_DATABASE);
$result= mysqli_query($con, "select * from advertisments");
?>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div class="accordion" id="accordionExample">
<?php
$i = 0;
$projects = array();
while ($arr_result= mysqli_fetch_assoc($result))
{
$projects[] = $arr_result;
}
foreach ($projects as $project){
?>
<div class="accordion-item">
<h2 class="accordion-header" id="heading<?php echo $i; ?>">
<button class="accordion-button <?php echo ($i>0) ? 'collapsed' : ''; ?>" type="button" data-bs-toggle="collapse" data-bs-target="#collapse<?php echo $i; ?>" aria-expanded="<?php echo ($i==0) ? 'true' : 'false'; ?>" aria-controls="collapse<?php echo $i; ?>">
<?php echo $project['adv_image']; ?>
</button>
</h2>
<div id="collapse<?php echo $i; ?>" class="accordion-collapse collapse <?php echo ($i==0) ? 'show' : ''; ?>" aria-labelledby="heading<?php echo $i; ?>" data-bs-parent="#accordionExample">
<div class="accordion-body">
<?php echo $project['url']; ?>
</div>
</div>
</div>
<?php
$i++;
}
?>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
<!-- https://artisansweb.net/create-dynamic-bootstrap-accordion/ -->
Comments
Post a Comment