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

WPArena

WPArena is a premium online resource site of WordPress and is focused on providing excellent WordPress Tutorials, Guides, Tips, and Collections.

  • News
    • Opinion
  • Tutorials
  • Reviews
    • Themes
    • Plugins
  • Comparisons
  • Collections
    • Education Themes
    • Genesis Child Themes
    • Best Responsive Themes
    • Medical WordPress Themes
    • Finance & Business Themes
    • Crowdfunding Themes
  • Resources
    • Inspiration
  • Services
WPArena » Tutorials
Tutorials

How to Expand/Collapse WordPress Posts with jQuery

Avatar of Noor Mustafa Raza Noor Mustafa Raza Updated: February 16, 2017

FacebookTweetPinLinkedInEmailPrint

WordPress has the feature which makes the post “Condensable” for the main post view page, but sometimes that feature does not fulfill the requirement.

Expand/Collapse WordPress Posts

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.
expandcollapsetreectrl
First, hide the post content:

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

Next, it would be very inefficient to have an editor add a control element to each post. So, we could add it to the theme’s post.php page, but then, the control would appear even if the user had JavaScript disabled. We want this
to degrade gracefully, it’s an enhancement after all.
If someone comes across this content in a mobile browser without JavaScript support or a text-only or text-to-speech browser, we’ll want them to just view the content as normal without any non-functional elements distracting them. We’ll use jQuery to add our control element. If JavaScript is disabled, it simply won’t appear.

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:

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

Last, let’s make sure the instructions in the .openIt div update:

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

That’s it! This is very useful jQuery enhancement for WordPress. Let me know if you are facing any issues in the comments section below.

This post was orginally published on: October 27, 2010 and was updated on: February 16, 2017.
FacebookTweetPinLinkedInEmailPrint

Related Stories

  • The Complete WordPress Security Guide 2023 – Step by Step

    The Complete WordPress Security Guide 2023 – Step by Step

  • Read This Before Embedding Your YouTube Videos into WordPress

    Read This Before Embedding Your YouTube Videos into WordPress

  • How to Convert WordPress Posts Words into Affiliate Links

Avatar of Noor Mustafa Raza

Noor Mustafa Raza

Ex-Editor in chief

I am a WordPress Developer and Designer, author @WPArena. I am providing Free WordPress consultation and can help you to install WordPress in a secure way to small businesses and bloggers.

Reader Interactions

Join the Discussion
  1. Avatar of KelliKelli says

    October 24, 2019

    Works great! What if I wanted to show say 3 ish sentences and then have the expand option?

    Reply

Share Your Thoughts Cancel reply

Before submitting your comment, we kindly ask that you read our comment policy. Your email address will remain confidential and will not be published or shared anywhere. If you subscribe, you will receive notifications regarding new comments.

Primary Sidebar

WordPress stats stopped working

Where Are WordPress Stats In Version 2.7

A featured image design for tips to save money for startups

4 ways to save funds for an IT startup

Recent Topics

  • Official Windows 7 Wallpapers
  • How to secure your WordPress images and content from Theft
  • Top 20 Web Designing Companies in the World
  • WP Rocket Review: Is It the Perfect Solution for WordPress Caching?
  • The Complete WordPress Security Guide 2023 – Step by Step

Footer

Top

  • Services
  • Our Themes
  • Facebook
  • Twitter
  • Linkedin

Reviews

  • Beaver Builder Review
  • Beaver Themer Review
  • WP User Frontend Pro
  • Ninja Forms Review
  • MemberPress Review

More Reviews »

Resources

  • Best WordPress Plugins
  • WordPress Permalinks Structure
  • Email Management System
  • Envato Free Files
  • Advertise
  • Write for us
  • Disclosure
  • Terms
  • Privacy
  • Contact

Copyright © 2023 · All Rights Reserved · WPArena is a Project of TechAbout LLC.
We are not affiliated with Automattic or WordPress.

  • Advertise
  • Write for us
  • Disclosure
  • Terms
  • Privacy
  • Contact
Share this ArticleLike this article? Email it to a friend!

Email sent!