Call post on the page that is shown

Question

I have a posts page that shows the title of the post and I want to click on the title to open a DIV with the post itself.

I have no problem with the Javascript required for this. My problem is that all news is being shown, rather than just the one associated with the clicked title.

I believe my problem is in the loop, but I couldn’t fix it.

This is my current code:

<!-- laço -->
<?php query_posts('posts_per_page=2&cat=36');?>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

    <figure class="effect-goliath">
        <img src="<?php echo wp_get_attachment_url(get_post_thumbnail_id()); ?>" alt="<?php the_title(); ?>"/>
        <figcaption>
            <h2><?php the_title(); ?></h2>
            <p><?php wp_limit_post(39,'...',true);?>...</p>
            <!-- <a href="<?php the_permalink() ?>">Veja mais</a> -->
        </figcaption>
    </figure>

    <div class="post-single">
        <span class="close">Fechar</span>
        <h2><?php the_title(); ?></h2>
        <p><?php the_content(); ?></p>
        <span class="close">Fechar</span>
    </div>

<?php endwhile?>
<?php else: ?>
    <h2>Nada Encontrado</h2>
    <p>Erro 404</p>
    <p>Lamentamos mas não foram encontrados artigos.</p>
<?php endif; ?>
<?php wp_reset_query(); ?>
<!-- fim laço -->

The div post-single is the one that will appear when you click on the title.

Answer 1

$(function () {
    $(document).on('click','.effect-goliath', effectgoliath);
    
    function effectgoliath(e){
        $this = $(this);
        //$this.siblings('.post-single').css('display','none');
        $this.siblings('.post-single').slideUp();
        
        //$this.next().css('display','block');
        $this.next().slideDown().one('click','.close',function(e){
            $this.next().slideUp();
        });
    }
    
});

.post-single {
    display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<figure class="effect-goliath">
    <img src="http://lorempixel.com/output/city-q-c-100-50-1.jpg" />
    <figcaption>
         <h2>title um</h2>
    </figcaption>
</figure>
<div class="post-single">
    <span class="close">Fechar</span>
     <h2>title title title </h2>
    <p>content content content content </p> 
    <span class="close">Fechar</span>
</div>

<figure class="effect-goliath">
    <img src="http://lorempixel.com/output/people-q-c-100-50-5.jpg" />
    <figcaption>
         <h2>title um</h2>
    </figcaption>
</figure>
<div class="post-single">
    <span class="close">Fechar</span>
     <h2>title title title </h2>
    <p>content content content content </p> 
    <span class="close">Fechar</span>
</div>

Answer 2

The post-single div, has no id or name. It makes me think that you should be using a javascript that locates the div and shows it. Just that, as you are making a loop for all posts on:

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

This means that all divs will be rendered without a specific id or name for each record. Therefore, when you find a div in javascript will locate all and open all. You need to find a way to put an id on each one and make javascript find the specific one you want to open. If you can show the javascript code you use to open the div, maybe you can help a little more.

Answer 3

You can create the page single-NAME.php, and assign the functions the_content() and whatever you want (image, etc.) to show on this page.

By clicking on the tag <a> who has the the_permalink() it will automatically direct you to the single.

The Wordpress understands all this automatically.