Show Hide post information Based on term Click

Custom Post Type and Taxonomy Setup: Ensure your custom post type (reviews) and taxonomy (vendor_category) are correctly registered.

ACF Fields: Make sure your ACF fields (banking_field, line_of_credit, business_loans_field) are created and assigned to the reviews post type.

Query and Display ACF Fields: You can achieve this in your taxonomy template file (e.g., taxonomy-vendor_category.php).

Here’s a simplified version of the code you might use in your taxonomy template:

<?php
// Check if we are on the taxonomy archive
if (is_tax('vendor_category')) {
    // Get the current term
    $current_term = get_queried_object();

    // Get all posts of the custom post type 'reviews' for the current term
    $args = array(
        'post_type' => 'reviews',
        'tax_query' => array(
            array(
                'taxonomy' => 'vendor_category',
                'field'    => 'slug',
                'terms'    => $current_term->slug,
            ),
        ),
    );
    
    $reviews_query = new WP_Query($args);

    if ($reviews_query->have_posts()) {
        while ($reviews_query->have_posts()) {
            $reviews_query->the_post();

            // Get the ACF fields based on the current term
            switch ($current_term->slug) {
                case 'business-banking':
                    $field_to_show = get_field('banking_field');
                    break;
                case 'business-line-of-credit':
                    $field_to_show = get_field('line_of_credit');
                    break;
                case 'business-loans':
                    $field_to_show = get_field('business_loans_field');
                    break;
                default:
                    $field_to_show = null;
                    break;
            }

            // Output the field
            if ($field_to_show) {
                echo '<div class="acf-field">' . esc_html($field_to_show) . '</div>';
            }
        }
        wp_reset_postdata();
    } else {
        echo '<p>No reviews found for this category.</p>';
    }
}
?>

Hey Amit,

You could try adding the taxonomy term to the link like so:

<a href="<?php the_permalink(); ?>?term=<?php echo get_queried_object()->slug; ?>">
    <?php the_title(); ?>
</a>

Then you can get this on your single-reviews.php page and conditionally render the fields:

$term_slug = isset($_GET['term']) ? sanitize_text_field($_GET['term']) : '';

if ($term_slug === 'business-banking') {
    the_field('banking_field');
} elseif ($term_slug === 'business-line-of-credit') {
    the_field('line_of_credit');
} elseif ($term_slug === 'business-loans') {
    the_field('business_loans_field');
}

Hopefully that helps or points you in the right direction!

@graphicscove Thanks a lot for your responding. I implemented this and its working perfectly but I have one issue with this. When I click on any post title in URL parameters are showing like term=business-banking etc. Is there any way to hide this. I dont want to show parameters in URL.

Once again many thanks for your help. Regards, Amit

@amitsksingh Here’s another way to handle this without exposing the term in the URL by using javascript:

<a href="<?php the_permalink(); ?>" class="term-link" data-term="<?php echo get_queried_object()->slug; ?>">
    <?php the_title(); ?>
</a>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const termLinks = document.querySelectorAll('.term-link');
        
        termLinks.forEach(link => {
            link.addEventListener('click', function(event) {
                const term = this.getAttribute('data-term');
                localStorage.setItem('selectedTerm', term);
            });
        });
    });
</script>

And then on your single page:

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const selectedTerm = localStorage.getItem('selectedTerm');

        if (selectedTerm === 'business-banking') {
            <?php the_field('banking_field'); ?>
        } else if (selectedTerm === 'business-line-of-credit') {
            <?php the_field('line_of_credit'); ?>
        } else if (selectedTerm === 'business-loans') {
            <?php the_field('business_loans_field'); ?>
        }

        // Optionally clear the local storage once used
        localStorage.removeItem('selectedTerm');
    });
</script>

@graphicscove After adding this. Single page shows blank page

@amitdholiya1990 Thanks a lot but its not working.

@amitsksingh Appologies, I’m typing this without having WordPress set up to test at the moment.

Could you try this instead?

<div class="acf-field-container">
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const selectedTerm = localStorage.getItem('selectedTerm');

            if (selectedTerm === 'business-banking') {
                document.querySelector('.acf-field-container').innerHTML = <?php the_field('banking_field'); ?>;
            } else if (selectedTerm === 'business-line-of-credit') {
                document.querySelector('.acf-field-container').innerHTML = <?php the_field('line_of_credit'); ?>;
            } else if (selectedTerm === 'business-loans') {
                document.querySelector('.acf-field-container').innerHTML = <?php the_field('business_loans_field'); ?>;
            }

            // Optionally clear the local storage once used
            localStorage.removeItem('selectedTerm');
        });
    </script>
</div>

@graphicscove Thanks for your great help. With small changes I got what i was looking for. Thanks for your great help. Regards, Amit