How to display the content of a post by clicking on its title?

Question

AJAX

There is a heading of posts through the while loop, I display the list of posts with an accordion, i.e. as planned, by clicking on the title of the entry, the content of the entry should appear.

The loop itself

<?php
                            $filter = array (
                                'post_type' => 'razion',
                                'taxnomy' => 'category_razion',
                                'category_razion' => 'racion-office',
                                'posts_per_page' => -1, 
                                'meta_key'       => 'date',
                                'orderby'        => 'meta_value_num',
                                'order'          => ASC
                            );
                            query_posts( $filter );
                            if ( have_posts() ){
                                while ( have_posts() ){
                                    the_post();
                                    ?>
                                    <div class="swiper-slide swiper-slidet">
                                        <a class="tab-time" href="#tab-time">
                                            <?php echo the_field('date'); ?>
                                        </a>
                                    </div>
                                    <?php
                                }
                            }
                            ?>

It turns out this

(dates are records)

As planned, when you click on a date (a custom field), the content of the record should appear in div='select', how can I implement this? Are there examples of implementation? I just can’t figure out how to build a request so that the content of the post I clicked on comes in response.. Thank you in advance

Answer 1

You can't use query_posts(), it's a global query that is used by WP core, you will break it. For requests, use wp_query()
echo before the_field()not used
Essentially, you can output the content right away, it doesn't make much sense to send ajax requests

<div class="swiper-slide swiper-slidet">
  <span class="tab-time">
    <?php the_field('date'); ?>
  </span>
  <div class="tab-content">
    <?php the_content(); ?>
  </div>
</div>

Click on the dates, these are ordinary tabs, there are a huge number of guides on the Internet on how to implement them. Examples on codepen