I have tried to showcase my categories as tabbing view but my code is not working properly. First time when i load the homepage, it shows all the posts from all the tabs and when i click on other tab item menu then it works fine. I want to show one only tab active on first view. below is my code :
<div class="row justify-content-center mt-4 mb-5">
<div class="col filters-group-wrap">
<div class="filters-group" id="tabs">
<ul class="container-filter mb-0 categories-filter text-center list-unstyled filter-options"><?php
$categories = get_categories();
foreach ($categories as $row){
echo '<li class="list-inline-item categories position-relative text-dark" data-group="'.$row->name.'">
'.$row->name.'</li>';
}
?></ul>
</div>
</div><!--end col-->
</div><!--end row--><div class="row row-cols-xl-4 row-cols-lg-3 row-cols-sm-2 row-cols-1 g-4" id="grid"><?php foreach ($categories as $row):?><?php
$args = array(
'category_name' => $row->name,
'posts_per_page' => 8,
);$myQry = new WP_Query($args);
if($myQry->have_posts()){
while($myQry->have_posts()): $myQry->the_post();
?><div class="picture-item" data-groups='["<?php echo $row->name;?>"]'>
<div class="card nft-items nft-primary rounded-md shadow overflow-hidden mb-1 p-3">
<div class="nft-image rounded-md position-relative overflow-hidden">
<a href="<?php the_permalink(); ?>">
<?php
if(has_post_thumbnail()):?>
<img src="<?php echo get_the_post_thumbnail_url(); ?>" class="img-fluid" alt="">
<?php endif; ?>
</a><div class="position-absolute top-0 end-0 m-2">
<a href="<?php the_permalink(); ?>" title="<?php echo the_title(); ?>" class="btn btn-pills btn-icon"><i class="uil uil-download-alt"></i></a>
</div></div><div class="card-body content position-relative p-0 mt-3">
<a href="<?php the_permalink(); ?>" class="title text-dark h6"><?php echo the_title(); ?></a>
</div>
</div></div><?php endwhile; };?>
<?php wp_reset_query();?><?php endforeach; ?></div><!--end row-->
