Show Data database only with specific ID - php

Question

I have this code to show all data in my database:
<?php foreach($alldatas as $data): ?>
<div class="col-md-4">
<div class="card">
<div class="content">
<h3><?php echo $data['data_name'];?></h3>
<div class="footer text-center">
<?php echo $data['data_version'];?>
</div>
</div>
</div>
</div>
<?php endforeach; ?>
That code works perfect to show all my data with different data_name and data_version. But what I want is to show the data only with specific ID.
So I want to make it work with bootstrap navtabs:
<div class="col-md-12">
<ul class="nav nav-pills nav-tabs nav-justified" role="tablist">
<li role="presentation" class="active">Pro</li>
<li role="presentation">Middle</li>
<li role="presentation">Low</li>
</ul>
</div>
<?php foreach($alldatas as $data): ?>
<div class="tab-content">
<div role="tabpanel" class="tab-pane fade in active" id="pro">
<?php if($data['id'] == "2" | $data['id'] == "3" | $data['id'] == "4"){?>
<div class="col-md-4">
<div class="card">
<div class="content">
<h3><?php echo $data['data_name'];?></h3>
<div class="footer text-center">
<?php echo $data['data_version'];?>
</div>
</div>
</div>
</div>
<?php } ?>
</div>
<div role="tabpanel" class="tab-pane fade" id="middle">
<?php if($data['id'] == "5" | $data['id'] == "6" | $data['id'] == "7"){?>
<div class="col-md-4">
<div class="card">
<div class="content">
<h3><?php echo $data['data_name'];?></h3>
<div class="footer text-center">
<?php echo $data['data_version'];?>
</div>
</div>
</div>
</div>
<?php } ?>
</div>
</div>
<?php endforeach; ?>
But it just only show data with ID 1,2,3 when I try to click other tabs. How to fix this?

Answer 1

You are having foreach loop on "tab-content" which is wrong, actually, it will create so many "tab-content"s and that's not required. You MUST loop for content not "tab-content".
So, first fix would be:
<div class="tab-content">
<div role="tabpanel" class="tab-pane fade in active" id="pro">
<?php foreach($alldatas as $data): ?>
<?php if($data['id'] == "2" | $data['id'] == "3" | $data['id'] == "4"){?>
<div class="col-md-4">
<div class="card">
<div class="content">
<h3><?php echo $data['data_name'];?></h3>
<div class="footer text-center">
<?php echo $data['data_version'];?>
</div>
</div>
</div>
</div>
<?php } ?>
<?php endforeach; ?>
</div>
<div role="tabpanel" class="tab-pane fade" id="middle">
<?php foreach($alldatas as $data): ?>
<?php if($data['id'] == "5" | $data['id'] == "6" | $data['id'] == "7"){?>
<div class="col-md-4">
<div class="card">
<div class="content">
<h3><?php echo $data['data_name'];?></h3>
<div class="footer text-center">
<?php echo $data['data_version'];?>
</div>
</div>
</div>
</div>
<?php } ?>
<?php endforeach; ?>
</div>
</div>
It will resolve your issue, however, if it still persists, you can implement a jquery function for custom toggling of "active" class. (Still, first correct the position of "foreach" as shown above).