I'm building a business listing website, and fetching all data from a database. The problem was that if I wrote a function for all the boxes uniformly, only the first one with the specified id would work. So I got the code below to do the work.
<?php
if(is_array($fetchData)){
$sn=1;
foreach($fetchData as $data){
?>
<div class="content">
<div id= <?php echo $data['id']??''; ?> class="business" style="border: 1px solid rgb(0, 0, 0);height: 100px;width: 400px;padding: 2px;overflow: hidden;">
<container class="boxholder1">
<div class="box1">
<div id="titleLine">
<p><img class="brandlogo" src="image/logo.png" alt=""</p>
<p class="brandname"><?php echo $data['businessname']??''; ?></p>
</div>
)
<div id="datas"><div id="list">
<p>County:<?php echo $data['county']??''; ?></p>
<p>CITY: <?php echo $data['city']??''; ?></p>
<p>Phone: <?php echo $data['phone']??''; ?></p>
<p>EMAIL: <?php echo $data['email']??''; ?></p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$("#<?php echo $data['id']??''; ?>").click(function(){
if($("#<?php echo $data['id']??''; ?>").css('height') === "500px")
$("#<?php echo $data['id']??''; ?>").css('height', '100px');
else
$("#<?php echo $data['id']??''; ?>").css('height', '500px');
})
$("#<?php echo $data['id']??''; ?>").click(function(){
if($("#<?php echo $data['id']??''; ?>").css('width') === "800px")
$("#<?php echo $data['id']??''; ?>").css('width', '400px');
else
$("#<?php echo $data['id']??''; ?>").css('width', '800px');
})
</script>
</div>
<?php
$sn++;}}else{ ?>
<?php
}?>
Surprisingly, it works perfectly for its purpose the boxes get displayed as I wanted, and the function works well too for each one of them. But now I want to filter the boxes by e.g location etc. and can't really get a solution for that.
I tried multiple ways for the filtering, but nothing really works, cause I can't reference all the boxes. That's why I need a simpler solution for displaying them or a working solution for the filtering, I'd preferably keep the same concept with the expandable boxes. Any idea is highly appreciated!
What I have tried:
I tried multiple ways for the filtering, but nothing really works, cause I can't reference all the boxes. That's why I need a simpler solution for displaying them or a working solution for the filtering, I'd preferably keep the same concept with the expandable boxes. Any idea is highly appreciated!