I've been tackling this problem for a while now and I can't seem to get it to work.
I have been trying to create dynamic tabs. I have a category table and a plan table in my database. I'm trying to display the "category" title as the tab and the plan table as my tab content.
I am not able to switch tab content. When i click tab menu, class is changing to 'active', but tab content div with that id is not changing to class 'active'. Please tell me how to make active class switching to work.
//index.php
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title></title>
</head>
<body>
<section class="pricing-area position-relative pt-100 pb-70">
<div class="container">
<div class="row">
<div class="col-12">
<div class="pricing-box-tabs">
<?php include_once("tabs.php"); ?>
<ul class="nav nav-tabs">
<?php echo $tab_menu; ?>
</ul>
<div class="tab-content">
<?php echo $tab_content; ?>
</div>
</div>
</div>
</div>
</div>
</section>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="dist/js/bootstrap.js"></script>
</body>
</html>
//tabs.php
<?php
$connect = mysqli_connect("localhost", "root", "", "plandata");
$tab_query = "SELECT * FROM category ORDER BY id ASC";
$tab_result = mysqli_query($connect, $tab_query);
$tab_menu = '';
$tab_content = '';
$i = 0;
while($row = mysqli_fetch_array($tab_result)) {
$class=$i==0 ? 'active' : '';
$tab_menu .= sprintf('<li><a class="%s" href="#%s" data-toggle="tab">%s</a></li>', $class, $row['id'], $row['categorytitle'] );
$tab_content .= sprintf('<div id="%s" class="tab-pane %s">', $row['id'], $class );
$product_query = "SELECT title, subtitle, feature FROM plan WHERE id = '".$row['id']."'";
$product_result = mysqli_query($connect, $product_query);
$tab_content .= '<div class="row pricing-box-wrap justify-content-center">';
while($sub_row = mysqli_fetch_array($product_result)) {
$PlanTitle = $sub_row['title'];
$SubTitle = $sub_row['subtitle'];
$Features = $sub_row['feature'];
$tab_content .= sprintf('
<div class="col-lg-3 co-md-6">
<div class="pricing-box mb-30">
<div class="pricing-head">
<h6>%s</h6>
</div>
<div class="pricing-list">
<h5>%s</h5>
</div>
<div class="collapsed">%s</div>
</div>
</div>
<div style="clear:both"></div>',
$PlanTitle,
$SubTitle,
$Features
);
$i++;
}
$tab_content .= '
</div>
</div>';
}
?>