Display RSS Feed Using jQuery UI Accordion | jQuery RSS Reader

With Search Engine Optimization becoming so popular, many people are finding themselves scattered across the internet. You’ll often find clients who want to be able to aggregate all of their online interaction into one place. RSS is a great way to do this and jQuery makes it very easy to manipulate the feed and display it however you want. Read more on this slick jQuery RSS reader:

What we’ll be doing is using some PHP to read our RSS feed, spitting out some HTML, and then formatting it using jQuery UI’s Accordion plugin.

1. Get the RSS feed.

For this example I’m using the RSS feed from a good friend of mine’s blog. It’s a WordPress blog which means you can access the feed simply by adding “/feed/” to the URL. His normal URL is http://jsimp90.wordpress.com/ so http://jsimp90.wordpress.com/feed/ will take me to his RSS feed.

If you view the source of this page, you can see the elements that make up the feed. In this case we’re going to use the link, title, and description from the feed to supply content to our site and build our jQuery RSS reader.

2. Create the functions.php file

Being that this is a PHP file, you cannot work on it locally without having PHP installed on your computer. One of the easiest ways to do this would be to install WAMP Server. There are many tutorials out there on how to do this.

Create a new folder. Call it rss-accordion. If you’re using WAMP Server, you’ll want to make sure this folder is in your www directory. In your rss-accordion folder create another folder and title it includes. Now in your includes folder create a new file called functions.php.

As you can see, in this example we are looping through the content of the RSS feed and spitting out the link, the title, and the description for each post.

3. Create the index.php file

So now we have a function that will read our RSS feed. Next we’re going to create an index.php file. Create a new file in your rss-accordion folder and call it index.php.

Your index file is the file that will automatically be loaded by the web browser. For this example, if you navigate to your rss-accordion folder in your browser, it will automatically load your index.php file. Put the following code in your index.php file.

<!DOCTYPE html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Cross Distinction Demos - jQuery RSS Accordian</title>

</head>

<body>

<?php require_once "includes/functions.php"; ?>

<aside>

<?php getFeed('http://jsimp90.wordpress.com/feed/');?>

</aside>

</body>

</html>

For this example, we’re using an HTML5 doctype and we’re using a new HTML5 tag called aside.

Here’s the gist of what’s happening:

require_once grabs our functions file so that our index.php is read as if our code from functions.php was directly in the file.

the getFeed function spits out the html code we told it to in our functions.php file.

When you load up the page in your browser you should see something similar to the following:

3. Download jQuery UI’s Accordion

So now that we’re reading from the RSS feed, it’s time to manipulate its layout using some jQuery. jQuery has a fantastic user interface library called jQuery UI. It can be a little confusing to use if you’ve never played around with it, but hopefully this tutorial will help. To build this jQuery RSS reader, we’re going to use jQuery UI’s accordian widget.

Only select Core, Widget, and Accordion. These are the only three we’ll be needing.

If you go back and look at the accordion page, you’ll see that it lists Core and Widget as it’s dependencies. That’s why we need these.

I chose the UI Lightness theme.

Now click download.

Here’s where it gets a little tricky so stay with me.

I like to keep my plugins separate from my other files so that after I configure them, if I want to use them on another section of the site or on another site entirely, I can easily access them and copy them over. That said, let’s create a plugins folder inside our rss-accordion folder.

Open up the zip folder that you just downloaded from jQuery UI:

Copy the css folder and paste it into your plugins folder

Copy the js folder and paste it into your plugins folder

Here’s what your file structure should now look like:

4. Include your CSS and Scripts in index.php

Now that we have our files in the right place, we need to make sure we include them in our index.php. Here is what your index.php should now look like:

As you can see, we added a link to the jQuery UI’s custom style sheet on line 5, a copy of jQuery that came with jQuery UI on line 6, and a copy of our custom jQuery UI script that includes the accordion functionality on line 7.

5. Initialize the Accordion function

If you reload your demo page, you’ll notice that nothing changes after we add our scripts. This is because we have to initialize our Accordion feature using some jQuery.

Add the following code to the bottom of your index.php file right before </body>:

<script>

$(function() {

$( "#accordion" ).accordion();

});

</script>

We’re using a self-executing function meaning it will run automatically, without needing to call it somewhere else in the page. If you remember, in our functions.php file we used PHP to generate <div id=”accordion”>. Here we are telling jQuery to find that div and turn it into an accordion using jQuery UI’s library.

If you refresh your browser you should now see something similar to this:

6. Add a little css

To get the same look as our final product, we have to take one more step and add some of our own css to the equation. You could do this directly in your index.php file with some inline styling, but for practicality purposes I’ll walk you through how I set mine up.

In your rss-accordion folder, add a new file called style.css. The only other actual file within this folder should be your index.php.

Copy the following into style.css

aside{

font-size:.7em;

width:20%;

float:left;

}

aside p a{

font-size:.9em;

float:right;

margin-top:10px;

}

All we’ve done is floated the accordion, which is in our aside element, to the left and given it a set width. We’ve also made the font-size a little smaller.

Then, to better distinguish the “continue reading” link, we’ve made the font-size a little smaller, pushed it all the way to the right, and pushed it down a bit.

Finished!

Well there you have it; a slick, easy to use jQuery RSS Reader. If you’ve found yourself scattered across the internet or have a client who is, one solution may be to use RSS to bring all of your information into one place.

Pretty nice post. I just stumbled upon your weblog and wanted to say that
I’ve truly enjoyed surfing around your blog posts. After all I will be subscribing to your feed and I hope you write again soon!

I see exactly what you mean in regards to mobile. If you’re looking to develop primarily for mobile, I might suggest a different approach then using an accordion. I really enjoy jQuery Mobile’s Nested Listviews as a UI solution. But to immediately answer your question, my recommendation would be to set the scroll height when the accordion section is activated. You can use the activate method combined with jQuery’s scrollTop function. The basic algorithm is:

Is there any way to ensure that the item you click always has the title visible at the top of the page. Sometimes I’m only seeing the bottom of the post and have to scroll up to the top, more noticeable on a mobile device.

SimpleXML is spitting that out as a default. The easiest way to change the text of that link is through jQuery. Let’s say you want to change “->continue reading” to “More…”. In index.php, simply change

In order to do two accordians you need to either write $( “#accordion” ).accordion(); twice, replacing “#accordian” with the div id of the second accordian, or you need to give both accordians a class of “accordian” and use “.accordian” instead of “#accordian”

I want to add 4 different feeds. I will use the div class accordian for each feed. My question is where to I indicate the feed url for each? Do I indicate the url for each feed in the index.php file? I understand that I include each accordian in a div class as you mentioned. But I am wondering where to specify the url for each feed.

I’m having exactly the same problem. Any help you can offer would be greatly appreciated. I’m building it into a wordpress theme that isn’t able to go live yet. I can email you over my code if that helps.

Rick! Definitely feel free to email me your code. Pat@crossdistinction.com. I’m also looking to do another tutorial shortly explaining how to integrate this into WordPress, since that seems to be a common question.

Hi there,
First of Great work on this! I made a custom one and im trying to get it into wordpress but i keep getting Warning errors. Do you by any chance have a tutorial or something? Because i did follow your small one here in the comments but still it didnt work for me. Thanks in advance for your replay.