How to Expand/Collapse WordPress Posts with jQuery

WordPress has a feature that allows you to make your post “Condensable” for the main post view page. However, sometimes this feature may not meet your requirements. If you want to allow your users to expand the post that interests them while keeping them in the context of all the other post headlines, you can employ a popular jQuery enhancement. Let’s take a detailed look at how you can achieve this.

Setting up the Custom jQuery Script

To begin, you will need to set up a clean custom-jquery.js file in your theme. This will serve as the container for your custom jQuery code.

Hiding the Post Content

The first step is to hide the post content using the following jQuery code snippet:

jQuery(".post .entry-content").hide();

This will ensure that the post content is not visible by default.

Adding the Expand/Collapse Control

To provide a user-friendly control for expanding and collapsing the post content, we need to add an interactive element to each post. However, it would be inefficient to have an editor manually add this control to every post. Instead, we can use jQuery to dynamically add the control element.

To achieve this, add the following jQuery code snippet to your custom-jquery.js file:

jQuery(".post").after("<div class='openIt' style='border-top: 1px solid #666; color: #036; text-align:right; cursor:pointer;'>Expand</div>");

This code snippet will insert a “Expand” control element after each post.

Enhancing Accessibility and Graceful Degradation

It’s essential to ensure that our implementation gracefully degrades for users who have JavaScript disabled or are using text-only or text-to-speech browsers. In these cases, we want the content to be displayed as normal, with no non-functional elements distracting the user. To address this, we can modify our jQuery code only to display the control element when JavaScript is enabled.

Update the previous code snippet in your custom-jquery.js file as follows:

jQuery(".post").after("<noscript><style>.openIt { display: none !important; }</style></noscript><div class='openIt' style='border-top: 1px solid #666; color: #036; text-align:right; cursor:pointer;'>Expand</div>");

This modification ensures that the control element only appears when JavaScript is enabled.

Show/Hide the Post Content

To implement the expand/collapse functionality, add the following jQuery code snippet to your custom-jquery.js file:

jQuery(".openIt").click(function() {
    jQuery(this).prev(".post").find(".entry").slideToggle("slow");
});

This code snippet adds a click event listener to the control element. When clicked, it will slide toggle the visibility of the corresponding post content.

Updating the Control Instructions

To provide meaningful instructions to the user, we can update the text of the control element based on its current state (expanded or collapsed). Modify your custom-jquery.js file with the following jQuery code snippet:

jQuery(".openIt").toggle(function(){
    jQuery(this).html("Close")},
    function(){
    jQuery(this).html("Expand")
});

This code snippet will toggle the text of the control element between “Close” and “Expand” based on its current state.

Finalizing the Implementation

That’s it! Using jQuery, you have successfully implemented the expand/collapse functionality for WordPress posts. This enhancement offers a user-friendly way for your readers to explore the content that interests them while keeping the overall context of other post headlines. Feel free to experiment further and don’t hesitate to ask any questions in the comments section below.