I am building a WordPress site for a composer who has written over 200 pieces of music. Each is a custom post (work), organised by a hierarchical custom taxonomy/category (type – being orchestral, vocal, etc).

I need to build a catalogue page in which all works are displayed in lists by type:

Orchestral Works:

• Work
• Work

Vocal Works:

• Work
• Work

etc.

The user can add categories to the list, so I can't simply write a query for each category. The catalogue page needs to check the list dynamically.

So far so good. This can be achieved – and sorted the way I need – like this:

<?php
    $cat_terms = get_terms(
        array('type'),
            array(
            'hide_empty' => true,
            'orderby' => 'name',
            'order' => 'ASC',
            'number' => 9999 
            )
        );
    if( $cat_terms ) :
    foreach( $cat_terms as $term ) :
    echo '<h5>'. $term->name .'</h5>';
?>

<?php $args = array(
    'post_type' => 'work',
    'posts_per_page' => 9999, // Assuming no-one is this prolific
    'post_status' => 'publish',
    'tax_query' => array(
        array(
            'taxonomy' => 'type',
            'field' => 'slug',
            'terms' => $term->slug,
        ),
    ),
    'ignore_sticky_posts' => true,
    'meta_key' => 'date',
    'orderby' => 'meta_value',
    'order' => 'DESC'
);
    $_works = new WP_Query( $args );
        if( $_works->have_posts() ) :
            echo '<table>';
                while( $_works->have_posts() ) : $_works->the_post(); ?>
                    <tr>
                        <td><?php the_field('date'); ?><td><?php the_title(); ?></td>
                    </tr>
                <?php endwhile;
            echo '</table>';
        endif;
    wp_reset_postdata();
    endforeach;
    endif;
?>

I then need to be able to display the content of the CPT (a small amount of data in a few custom fields) in another div in the same page (and not link out to a single-work.php template as would be more usual). This would be like a tabbed content effect – one posts' content displayed at a time, chosen from the category-based list on the page.

I could create this second part by loading everything and toggling visibility via jQuery but that would mean loading 200+ posts with the page and making them invisible, which strikes me as a terrible idea.

Is it possible to fetch/load the content of the selected post dynamically on click, so only the posts required are queried beyond the initial list? How would this be handled, and where would I begin with it?