I have created a bootstrap tab to filter the content according to parent and child category. I want to call parent and child category name in separate div because child category will work like dropdown that on clicking main category will open relevant child category of base category. I have checked from lot of content but not found any relevance answer.
Anyone will suggest highly appreciated. Please check my code below.
<?php
$project_files_cats = get_terms(
array(
'taxonomy' => 'project_files_cat',
'hide_empty' => 0,
)
);
foreach ( $project_files_cats as $key => $project_files_cat ) {
?>
<button class="nav-link <?php echo esc_attr( $project_files_cat->slug ); ?>" id="v-pills-<?php echo esc_attr( $project_files_cat->slug ); ?>-tab" data-bs-toggle="pill" data-bs-target="#v-pills-<?php echo esc_attr( $project_files_cat->slug ); ?>" type="button" role="tab" aria-controls="v-pills-<?php echo esc_attr( $project_files_cat->slug ); ?>" aria-selected="true"><?php echo esc_html( $project_files_cat->name ); ?></button>
<!-- <button class="nav-link" id="v-pills-profile-tab" data-bs-toggle="pill" data-bs-target="#v-pills-profile" type="button" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</button>
<button class="nav-link" id="v-pills-messages-tab" data-bs-toggle="pill" data-bs-target="#v-pills-messages" type="button" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</button>
<button class="nav-link" id="v-pills-settings-tab" data-bs-toggle="pill" data-bs-target="#v-pills-settings" type="button" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</button> -->
<?php } ?>
</div>
<div class="tab-content" id="v-pills-tabContent">
<?php
$c = 0;
foreach ( $project_files_cats as $key => $project_files_cat ) {
$args = array(
'post_type' => 'project_files',
'posts_per_page' => -1,
'project_files_cat' => $project_files_cat->slug,
'hide_empty' => 1,
'orderby' => 'name',
'order' => 'ASC',
);
?>
<div class="tab-pane <?php echo ( 0 === $c ) ? 'show active' : 'fade'; ?>" id="v-pills-<?php echo esc_attr( $project_files_cat->slug ); ?>" role="tabpanel" aria-labelledby="v-pills-<?php echo esc_attr( $project_files_cat->slug ); ?>-tab">
<?php
$projects = new WP_Query( $args );
if ( $projects->have_posts() ) :
while ( $projects->have_posts() ) :
$projects->the_post();
?>
<div class="right-panel">
<p><?php the_title();?></p>
<input class="checks" type="checkbox" value="" /> <div class="btn-grp">
<a id="download-dwg" class="btn-1" href=""><img src="https://mydevfactory.com/~sanjib7php/deep/nedzink/wp-content/uploads/2023/10/image-14.svg"><?php the_field("image_download_button");?></a>
<a id="download-pdf" class="btn-2" href=""><img src="https://mydevfactory.com/~sanjib7php/deep/nedzink/wp-content/uploads/2023/10/Frame-1-1.svg"><?php the_field("pdf_download_button_text");?></a>
</div>
</div>
<?php endwhile; endif; wp_reset_postdata();?>
</div>
<!-- <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">...</div>
<div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">...</div>
<div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">...</div> -->
<?php
$c++;
}
?>
</div>
</div>
<button type="submit" class="delete" disabled="disabled">Delete</button>
</div>
</div>