<?php
/**
* Template Name: Sliding Posts Display
*/
get_header();
?>

<div class=”post-container”>
<?php
$args = [
‘post_type’ => ‘post’,
‘posts_per_page’ => -1, // Get all posts
‘post_status’ => ‘publish’
];

$query = new WP_Query($args);

if ($query->have_posts()) :
$count = 0;
while ($query->have_posts()) : $query->the_post();
?>
<div class=”single-post” style=”display: <?php echo ($count === 0) ? ‘block’ : ‘none’; ?>;”>
<h2><?php the_title(); ?></h2>
<div><?php the_excerpt(); ?></div>
</div>
<?php
$count++;
endwhile;
wp_reset_postdata();
else :
echo ‘<p>No posts found.</p>’;
endif;
?>
</div>

<!– jQuery Slide-Up Script –>
<script>
jQuery(document).ready(function($) {
var posts = $(“.single-post”);
var index = 1;

function slideNext() {
if (index < posts.length) {
$(posts[index]).slideDown(800, function() {
index++;
setTimeout(slideNext, 1000); // delay between slides
});
}
}

setTimeout(slideNext, 1000); // start sliding after 1 second
});
</script>

<style>
.post-container {
max-width: 700px;
margin: 0 auto;
}
.single-post {
margin-bottom: 30px;
background: #f4f4f4;
padding: 20px;
border: 1px solid #ccc;
display: none;
}
.single-post:first-child {
display: block; /* First post visible */
}
</style>

<?php get_footer(); ?>