Expanding Posts Grid Revealing Full Post When Excerpt Clicked

The code in this download displays excerpts in a grid. When one excerpt is clicked, the full post is displayed underneath the grid like this :

In this screenshot, the 6th excerpt is clicked displaying the full post after the grid of excerpts.

Watch the following video demo to see how it works :

Demo Video #

Shows excerpts for 6 posts displayed in a mobile responsive grid. When any excerpt is clicked, the full post content for that specific excerpt is revealed in full below the grid of excerpts.

Tested using the Genesis Sample child theme by StudioPress however will work in any Genesis child theme.

Installation Steps #

There’s 3 steps :

Step 1 – Upload the file named expanding-grid.php to your child themes root directory or page-templates folder.

Step 2 – Copy & paste the following CSS to the end of your child themes style.css file and clear caching.