Show related post_content to a custom-post title toggle class

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

Read More

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

Related posts

1 comment

  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.

Comments are closed.