Genesis Tutorials

Toggle Read More Button To Show Full Content On Single Posts

This code enables you to add a Read More button which toggles the full content when clicked. When expanded the button text changes to Read Less and enables you to slide back up to only show the 1st paragraph.

Watch the following video demo to see exactly what the code does.

The code works on single posts, single static pages and single custom post types. It wraps the content in a div, excluding the 1st paragraph and adds the button after the last paragraph. Use this solution if you need this functionality on archive page types.


There’s 3 steps using the code in the members download folder :

Step 1 : From the download folder, upload the file named readmore.js to your child themes root directory.

Step 2 : From the download folder, copy & paste the PHP to the end of your child themes functions.php or template where you want to use the toggle function.

Step 3 : From the download folder, copy and paste the CSS to the end of your child themes style.css and clear caching.

Register or login to access the download folder :

Related Tutorials

Leave a Reply

Your email address will not be published. Required fields are marked *