How to Expand/collapse WordPress posts with jQuery
WordPress has the <!–more->feature which make the post “Condensable” for the main post view page, but sometime that feature doe not fulfill the requirement.
I’d like the user to have the option to expand the post that interests him, while keeping him in the context of all the other post headlines. This is a very popular jQuery enhancement. Let’s take a look at how we’d do that. Set up a clean custom-jquery.js file in your theme and let’s get started.
First, hide the post content:
to degrade gracefully, it’s an enhancement after all.
jQuery(“.post”).after(“<div class=’openIt’ style=’border-top: 1px solid #666; color: #036; text-align:right; cursor:pointer;’>Expand</div>”);
We now just need a nice way to show and hide the post’s content:
Last, let’s make sure the instructions in the .openIt div update:
References and More Resources:
Show/Hide any div box with jQuery in WordPress
More Showing, More Hiding
Assorted built-in jQuery show/hide effects
Simple Jquery Show/Hide Div
How to Expand / Collapse Latest Posts or Archives
How to expand collapse (toggle) div layer using jQuery
How to Expand/Collapse TreeCtrl nodes by using Enter Key?
Expanding Text plugin for WordPress
Collapse-O-Matic WordPress Plugin