• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2785

Original Genesis & WooCommerce Tutorials & 6000+ Guaranteed Code

Snippets

  • Try Premium
  • Log in

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 :

How To Create an Expanding Grid From Excerpt To Full Post

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.

Register for full access

CSS Grid Columns

Reader Interactions

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Code written by Brad Dalton specialist for Genesis, WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Tags
 

Loading Comments...
 

You must be logged in to post a comment.