We Keep Coding

How to show specific content relating to link clicked on

I am currently working on a site where my client wants a list of icons and when you click on an icon a panel slides in with the information relating to that icon. Here is a link to the section - https://vibrantpropertyservices-u8uj.temp-dns.com/wp/services/#services.
I have the sliding panel working but I can't seem to get the relevant content to show, it just shows the first icon's info. Here is my code:
<?php
$services_query = new WP_Query( array(
'post_type' => 'servicespage',
'posts_per_page' => -1,
'order' => 'ASC',
'orderby' => 'menu_order'
)
);
?>
<?php if ( $services_query->have_posts() ) : ?>
<?php while ( $services_query->have_posts() ) : $services_query->the_post(); ?>
<?php $current_id = get_the_ID(); ?>
<div class="icon" onclick="openNav()" data-src="content-<?php echo $current_id ?>">
<?php if (has_post_thumbnail( $post->ID ) ): ?>
<?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'single-post-thumbnail' ); ?>
<img src="<?php echo $image[0]; ?>">
<?php endif; ?>
<h3><?php the_title(); ?></h3>
</div>
<div id="slide" class="overlay">
×
<div id="content-<?php echo $current_id ?>">
<div class="test">
<h3><?php the_title(); ?></h3>
<?php the_content(); ?>
</div>
</div>
</div>
<?php endwhile; ?>
<?php wp_reset_query(); ?>
<?php endif; ?>
</div>
/* Open when someone clicks on the span element */
function openNav() {
document.getElementById("slide").style.width = "100%";
}
/* Close when someone clicks on the "x" symbol inside the overlay */
function closeNav() {
document.getElementById("slide").style.width = "0%";
}
I know I'm calling the id of "slide" but I don't know how to target <div id="content-<?php echo $current_id ?>"> for each individual link?
Many thanks

remove onclick function for both open
<div class="icon" data-src="content-<?php echo $current_id ?>">
and for close also
×
add below Jquery instead of functions
jQuery(document).on("click",".services-wrap .icon",function(){
jQuery(this).closest('div.overlay').css('width:100%');
});
jQuery(document).on("click",".overlay .closebtn",function(){
jQuery(this).closest('div.overlay').css('width:0%');
});

Fancybox 3 Style Issue

When I click one of the preview images, in order to bring up the fancybox gallery, it just swipes the image to the right and gives me this broken overlay. Not sure what the issue is here...
HTML (Note I'm using WordPress and Advanced Custom fields):
<?php if ( have_rows("inspiration_gallery") ) : ?>
<?php $i = 0; while ( have_rows("inspiration_gallery") ) :
the_row();
$img = get_sub_field("inspiration_image");
$img_id = $img['ID'];
$img_url = $img['url'];
$gallery_id = $gallery_id ? $gallery_id : $img_id;
$related = get_sub_field("inspiration_related");
?>
<?php if ($i == 0): ?>
<!-- Preview Image -->
<a class="inspiration__preview-link" href="<?php echo esc_url($img_url); ?>" data-fancybox="gallery-<?php echo esc_attr($gallery_id); ?>">
<?php echo wp_get_attachment_image( $img_id, "full", false, array("class" => "inspiration__prev_img") ); ?>
</a>
<?php else: ?>
<!-- Gallery Fancybox Link -->
<a class="inspiration__gallery-link none" href="<?php echo esc_url($img_url); ?>" data-fancybox="gallery-<?php echo esc_attr($gallery_id); ?>"></a>
<?php endif; ?>
<?php $i++; endwhile; ?>
<?php endif; ?>
I've got the latest versions of Fancybox JS and CSS files enqueued.

Giving unique ID's in a loop doesnt work

I'm trying to give each ID in the loop a unique ID.
Like: check-1, check-2 etcera.
But it is not working .
Here is my code:
<?php
if( have_rows('activiteiten_knoppen') ): $count=0;?>
<?php while(have_rows('activiteiten_knoppen') ): the_row();
$meer_info = get_sub_field('meer_info');
$tijd = get_sub_field('reserveren');
?>
<p class="activiteitInfo"><a class="fancybox-inline" style="color: #f3f3f3 !important;">Meer info</a></p>
<p class="activiteitReserveer"><a style="color: #f3f3f3 !important;" href="<?php echo $tijd; ?>">Reserveren</a></p>
<div id="check-<?php echo $count ?>" style="display: none;"><?php echo $meer_info; ?></div>
<script>
$(document).ready(function () {
$(".activiteitInfo").click(function () {
$(".hoi").css("display", "block");
});
});
</script>
<?php $count++; ?>
<?php endwhile; ?>
<?php endif; ?>

Lighbox only showing data of the current post in Wordpress

I wanted to show some lightbox funtionality with the use of shortcodes. The code is working fine except for the data shown in the ligthbox. It only shows the data from the latest post in the loop. How can i manage to get lightbox showing the data belonging to the post?
<?php
// Posts are found
if ( $posts->have_posts() ) {
while ( $posts->have_posts() ) :
$posts->the_post();
global $post;
?>
<center>
<div id="su-post-<?php the_ID(); ?>" class="su-post">
<?php if ( has_post_thumbnail() ) : ?>
<a class="su-post-thumbnail" href="<?php the_permalink(); ?>"><?php the_post_thumbnail(); ?></a>
<?php endif; ?>
<div class="su-post-excerpt">
<!-- Shows the button and the hidden lightbox -->
<?php echo do_shortcode ('[su_lightbox type="inline" src="#showInfo"][su_button] Info[/su_button][/su_lightbox]'); ?>
<!-- Shows the lightbox if button is clicked with the data -->
<?php echo do_shortcode ('[su_lightbox_content id="showInfo"][su_meta key="info" default="Geen tekst"][/su_lightbox_content]'); ?>
<?php echo do_shortcode ('[su_lightbox type="inline" src="#showVideo"][su_button] Video[/su_button][/su_lightbox]'); ?>
<?php echo do_shortcode ('[su_lightbox_content id="showVideo"][su_video url="{su_meta key=video}"][/su_lightbox_content]'); ?>
<?php echo do_shortcode ('[su_lightbox type="inline" src="#showFoto"][su_button] Foto[/su_button][/su_lightbox]'); ?>
<?php echo do_shortcode ('[su_lightbox_content id="showFoto"][su_meta key="fotos" default="Geen fotos"][/su_lightbox_content]'); ?>
</div>
</div>
</center>
<?php
endwhile; echo do_shortcode ('[su_lightbox_content id="showInfo"][su_meta key="info" default="Geen tekst"][/su_lightbox_content]');
}
// Posts not found
else {
echo '<h4>' . __( 'Posts not found', 'shortcodes-ultimate' ) . '</h4>';
}
?>

By adding a counter in the while loop and using the variable in the shortcode SRC and ID fields. I needed unique ID's for each post.
$n = 0; /* Outside While Loop */
echo do_shortcode( '[su_lightbox type="inline" src="#showInfo'.$n.'"][su_button] Info[/su_button][/su_lightbox] ');
echo do_shortcode( '[su_lightbox_content id="showInfo'.$n.'"][su_meta key="info" default="Geen tekst"][/su_lightbox_content]' );
$n++; /* Inside While Loop */

Show posts and image in same div

I have featured images shown for different posts of same category in a page in a specific div. I need to show the whole post related to this image in the same page in another div. I know i must use JavaScript in this. But i need some reference which i can use for this. Can anyone help me with this? I am using the following code to show the images
<?php
/*
Template Name: Meet The Team Template
*/
?>
<?php get_header(); ?>
<div id = "meet_posts" class = "narrowcolumn">
<?php
$recent = new WP_Query("cat=6&orderby=title&order=ASC");
while( $recent->have_posts() ) : $recent->the_post();
$desc_values = get_post_custom_values("description");
?>
<div id="meetteam_featured_image">
<a href="<?php the_permalink() ?>" rel="title">
<?php
if ( has_post_thumbnail() ) {
the_post_thumbnail();
}
?>
</a>
</div>
<?php endwhile; ?>
</div>
<?php get_footer(); ?>
Thanks in advance.

Replace your above code with this following code :
<?php /*
Template Name: Meet The Team Template
*/
?>
<?php get_header(); ?>
<div id="meet_posts" class="narrowcolumn">
<?php
$recent = new WP_Query("cat=6&orderby=title&order=ASC");
while($recent->have_posts()):$recent->the_post();
$desc_values = get_post_custom_values("description");
?>
<div id="meetteam_featured_image" class="<?php the_ID(); ?>">
<a href="<?php the_permalink() ?>" rel="title">
<?php
if ( has_post_thumbnail() ) {
the_post_thumbnail();
}
?>
</a>
</div>
<?php endwhile ?>
<div id="image-post-info"></div>
</div>
<?php get_footer(); ?>
Add this following code in functions.php file :
add_action( 'wp_ajax_ajaxified_function', 'ajaxified_function' );
add_action( 'wp_ajax_nopriv_ajaxified_function', 'ajaxified_function' );
function ajaxified_function() {
$temp = get_post($_POST['post_id']);
echo $temp->post_title.'<br/><br/>'.$temp->post_content;
die();
}
Add this following code in your custom js file :
jQuery(document).ready(function (){
jQuery('#meetteam_featured_image a').on('click',function(event){
event.preventDefault();
var post_id = jQuery(this).parent().attr('class');
jQuery.ajax({
type: "POST",
url: 'http://www.yoursitename.com/wp-admin/admin-ajax.php',
data: 'action=ajaxified_function&post_id='+post_id,
success: function (msg) {
jQuery('#image-post-info').html(msg);
},
error: function () {
alert('Error');
}
});
});
});
Add custom js file by including following code in functions.php file :
function add_custom_scripts() {
wp_enqueue_script( 'custom-scripts', get_stylesheet_directory_uri() .'/js/custom- scripts.js' );
}
add_action( 'wp_enqueue_scripts', 'add_custom_scripts' );
Hope this will help....!!!!!

<div id = "meet_posts" class = "narrowcolumn">
<?php
$recent = new WP_Query("cat=6&orderby=title&order=ASC");
while( $recent->have_posts() ) : $recent->the_post();
$desc_values = get_post_custom_values("description");
?>
</div><!--close first div-->
<div id="meetteam_featured_image">
<a href="<?php the_permalink() ?>" rel="title">
<?php
if ( has_post_thumbnail() ) {
the_post_thumbnail();
}
?>
</a>
</div><!--close second div-->
<?php endwhile; ?>