How to Expand / Collapse Latest Posts or Archives

  • matthewpaul

    (@matthewpaul)


    13 years, 8 months ago

    In my site’s sidebar, I have a list of the 10 latest posts. I’d like to add a link at the bottom to “Show More Posts” and “Show Less Posts” when clicked.

    For example: Go here
    On the right sidebar, scroll down to “Archives”. The “See All Archives” / “Hide Archives” feature is what I’d like to create, but using the latest post titles (w/ links) rather than an archive.

    Anyone know of a jQuery or similar plugin that can handle this feature?

    This is the code I’m currently using to display the latest 10 posts:

    <?php
	wp_reset_query();
	if (is_single()) { ?>
		<span class="latest">Latest Posts</span>
		<ul class="blogroll">
			<?php $myposts = get_posts('numberposts=10&category=-3');
			foreach($myposts as $post) :?>
			<li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>&nbsp;</li>
			<?php endforeach; ?>
		</ul>
	<?php } ?>

Viewing 5 replies - 1 through 5 (of 5 total)
  • ambrosite

    (@ambrosite)

    13 years, 8 months ago

    That’s definitely a Javascript/jQuery effect. I guess you already knew that. One of these tutorials should help.

    http://wpcult.com/how-to-showhide-any-div-box-with-jquery-in-wordpress/

    http://www.learningjquery.com/2007/02/more-showing-more-hiding

    http://www.gowestwebdesign.com/demos/jquery-effects-1/index.cfm

    http://papermashup.com/simple-jquery-showhide-div/

    Thread Starter matthewpaul

    (@matthewpaul)

    13 years, 8 months ago

    Thanks. Basically I’ll have a list of 10 posts. Then a “Show More” button below, which would reveal more posts when clicked.

    So I’m thinking I’ll have to create a new div to hold the additional posts. Is it possible to use “get_posts” to show posts 10 through 15 (since the 10 newest posts would already be listed above the new div)?

    My only issue is getting this feature to function properly with WordPress code.

    ambrosite

    (@ambrosite)

    13 years, 8 months ago

    The ‘more’ posts definitely need to be in their own div. You don’t necessarily need two separate loops for that, though. I would think something like this could work:

    <div class="latest-posts">
<?php
$i = 0;
if (have_posts()) : while (have_posts()) : the_post();
    if ( $i == 10 )
        echo '<div class="more-posts">'; ?>
    <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
    <?php $i++;
endwhile; endif; ?>
</div> <!-- end more-posts -->
</div> <!-- end latest-posts -->

    That will create a div within a div containing the ‘more’ posts. Then you use Javascript to show/hide the inner div.

    Thread Starter matthewpaul

    (@matthewpaul)

    13 years, 8 months ago

    ambrosite,

    I tried your code, but all that appears is the links to whatever posts are contained on the current page. Like on a single page, only a link to the page I’m viewing is displayed.

    I was able to get a it working (prior to implementing any jQuery) using this code:

    <?php
	wp_reset_query();
	if (is_single()) { ?>
		<span class="latest">Latest Posts</span>
		<ul class="blogroll">
			<?php $myposts = get_posts('numberposts=10&category=-3');
			foreach($myposts as $post) :?>
			<li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a> </li>
			<?php endforeach; ?>
		</ul>
		<a href="#" class="show-more">Show More</a>
		<ul class="blogroll">
			<?php $myposts = get_posts('paged=2&numberposts=5&category=-3');
			foreach($myposts as $post) :?>
			<li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a> </li>
			<?php endforeach; ?>
		</ul>
	<?php } ?>

    Not the cleanest code, but it works. Can this be written simpler?

    ambrosite

    (@ambrosite)

    13 years, 8 months ago

    If you wanted to use my code, you would need to call query_posts prior to entering the loop in order to retrieve the posts you want to display.

    But there is nothing wrong with your code. Even if you rewrote it to use only one loop, it wouldn’t save you much, since the ‘show more’ posts need to be marked up in a separate list anyway. If it works, don’t fix it.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘How to Expand / Collapse Latest Posts or Archives’ is closed to new replies.