Our First Project Expandingcollapsing Word Press posts

OK, this is a quick project, but it requires that we use a little bit of everything we just covered. I've always liked that WordPress had the <!--more-> feature to make posts "condensable" for the main post view page, but that doesn't always suit my purposes for some types of posts. Let's assume that my blog will have relatively short posts, yet I really want a reader to be able to see as many headlines as possible, above the fold, without having to scroll or scan any content (we'll suspend reality and pretend that my post headers are just unbelievably interesting and compelling).

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. You've probably seen similar enhancements to this on many sites. This is a very popular jQuery enhancement for FAQ and press release posts.

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, we'll have to hide our post content:

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

Next, we'll need some sort of control for people to click on which also gives them some intuitive instructions. Of course, it would be very inefficient to have an editor add a control element to each post, so we won't do that (but sadly, I've seen this done on a few projects). 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! Your very first, useful jQuery enhancement for WordPress. Here's a screenshot of what it looks like:

Expand

Ut enim ad minim veniam

Posted on January 27, 2Q1Q by admin

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud cxcr citation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse eiUum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt ill culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud cxcr citation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute iiure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Except eur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim. id est laborum.

Posted in Uncateqonzeo | Leave a comment | Edit

Close

Dolor sit amet

Posted on January 27, 3010 by admin

Posted in Uncaieoorized J Leave a comment I Edit

Recent Comments

■ Mr WordPress on Hello world!

Archives

Categories

■ Uncategorkzed

Meta

■ VVordPress.org

Expand

Was this article helpful?

0 0
Blogging For Business

Blogging For Business

Download this Guide And Discover How Start And Run Your Very Own Successful Business Blog. Always Wanted To Start Your Own Blog?

Get My Free Ebook


Post a comment