将相关的post_content显示到自定义帖子标题切换类

Question

I have created a custom-post-type and loaded the titles on my front-page as toggle-buttons. Now I want to make sure, that the content of the toggle-div is always related to the button I clicked. I tried to realize by simply using loading the post content, but I think I need to get the post-id as a variable or something into the loop. I have simply no idea how to make this work. I am a absolute beginner in PHP, hope someone can give me a hint?

Related Website: http:www.mzk.ernst-werbeagentur.de

My Code:

<?php 
$query = new WP_Query( array( 'post_type' => 'praxen' ) );

if ( $query->have_posts() ) : ?>

<div class="container-fluid wrapper-slider-head">
<div class="container-fluid slider-head fullscreen" id="img-start">
    <img src="http://mzk.ernst-werbeagentur.de/wp-content/uploads/2015/10/background-start.jpg" width='1920' height='1080'>
</div>

<?php while ( $query->have_posts() ) : $query->the_post(); ?>   
    <div class="container-fluid slider-head fullscreen" id="img-<?php echo $countimg; ?>" style="display:none;">
    <?php echo get_the_post_thumbnail( $post_id, 'full', array( 'class' => 'img-' . $countimg ) ); ?>
    </div>
<?php 
$countimg++;
endwhile; wp_reset_postdata(); ?>

</div>

<?php endif; ?>


<?php 
$query = new WP_Query( array( 'post_type' => 'praxen' ) );

if ( $query->have_posts() ) : ?>

<div class="container links-praxen">
<div class="row">

<?php while ( $query->have_posts() ) : $query->the_post(); ?>   
    <div class="col-sm-4"><div <?php post_class( 'jumbotron p' . $countpost ); ?>><div class="hovertogglecont"><div class="hovertogglecontinside">
    <h2><?php the_title(); ?></h2>
    <p><?php echo get_post_meta($post->ID, 'toggletitel', true); ?></p>
    </div></div></div></div>
<?php 
$countpost++; endwhile; wp_reset_postdata(); ?>


<?php endif; ?>


<div class="container-fluid wrapper-praxisinfo" style="display:none;"> <!-- This div should toggle and show the related post-content by clicking on a link from the loop above. -->
<div class="container">
    <div class="close-post-content"><i class="fa fa-times" style="cursor:pointer; color:#fff;"></i></div>
    <div class="post-content">

        <?php 
        $query = new WP_Query( array( 'post_type' => 'praxen' ) );

        if ( $query->have_posts() ) : ?>

            <?php while ( $query->have_posts() ) : $query->the_post(); ?>   
                <?php the_content(); ?>
            <?php 
            endwhile; wp_reset_postdata(); ?>

        <?php endif; ?>

    </div>
</div>
</div>

I want tot show the related post in the third loop.

Cheers and thank you very much, David

Answer 1

once you load your page content, you cannot re-run php with some parameter after JavaScript button click. You would need to use AJAX call to get post content from some new PHP file for example post-content.php with is as parameter and then place it inside your wrapper-praxisinfo.

What I would suggest instead is to output all posts as you are doing now, and just hide ones that you dont want to see with JavaScript.

<div class="container">
    <div class="close-post-content"><i class="fa fa-times" style="cursor:pointer; color:#fff;"></i></div>
    <div class="post-content">

        <?php 
        $query = new WP_Query( array( 'post_type' => 'praxen' ) );

        if ( $query->have_posts() ) : ?>

            <?php while ( $query->have_posts() ) : $query->the_post(); ?>   
                <div class="post-id-<?php the_ID();?>">
                <?php the_content(); ?>
                </div>
            <?php 
            endwhile; wp_reset_postdata(); ?>

        <?php endif; ?>

    </div>
</div>
</div>

Here every post is wrapped inside a div with post ID as a class. You just need to hide all posts and on button click show the one that was clicked by ID.

</div>