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
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.
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.