0

I am designing a wordpress blog where you click on the title of the post and the content of the post opens up from the right side of the website. I was wondering if it was possible to have multiple the_content() tags in the post that referenced the first (newest), second, third, fourth etc. posts. Here is my code so far, the content would exist in the "project-single" div and the titles would appear in the "blog-post-title":

index.php:

<?php get_header(); ?>


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

            get_template_part( 'content', get_post_format() );

        endwhile; endif; 
        ?>

content.php

   <div class="blog-post">
                <ul id="projects">
                    <li>
                        <span class="blog-post-title"><?php the_title(); ?></span><span class="blog-post-meta"><?php the_date(); ?> by <a href="#"><?php the_author(); ?></a></span>
                    </li>
                </ul>
            </div>
            <div id="project-single">
                <div class="inner-single">
                    <?php the_content(); ?>
                </div>
            </div>

<br><!-- /.blog-post -->

javascript (for the animation of the content opening from right:

    var singleSize = 45;
var open = false;
var newGlobalWidth = 100 - singleSize;


$('li').click(function () {

    if(!open) {
        open = true;
        openPage(this);
    }else {
        closePage(this);
    }

});


function openPage(thus){
    // console.log($(thus).data('project'));
    $('#project-single').toggle();
    console.log('o');
    $('.inner-header').animate({ padding: '0'});

    $('.inner-global').animate({width: newGlobalWidth + '%' }, 500, function() {
         $( ".inner-single" ).delay( 200 ).animate({ opacity: 1}, 200);
    });


}

function closePage(thus){
    $('#project-single').toggle();
    $( ".inner-single" ).css({ 'opacity': '0'});
    $('.global').animate({width: 100 + '%' }, 200);
    $('.inner-header').animate({ padding: '0 15vw 1vw'});

    open = false;
}

Thanks for your time and patience! I'm new to this but having fun learning!

New contributor
cw86 is a new contributor to this site. Take care in asking for clarification, commenting, and answering. Check out our Code of Conduct.

Your Answer

cw86 is a new contributor. Be nice, and check out our Code of Conduct.

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Browse other questions tagged or ask your own question.