Home

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:

jQuery UI Logo

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.

Final ProductSource

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.

File Structure With Functions.php

Put the following code into your functions.php file:

  1. <?php
  2. function getFeed($feed_url) {
  4. $content = file_get_contents($feed_url);
  5. $x = new SimpleXmlElement($content);
  7. echo '<div id="accordion">';
  9. foreach($x->channel->item as $entry) {
  10. echo "<h3><a href='$entry->link' title='$entry->title'>" . $entry->title . "</a></h3>";
  11. echo "<div><p>" . $entry->description . "</p></div>";
  12. }
  13. echo "</div>";
  14. }
  15. ?>

Jeffrey Way does a great job of explaining this code in depth in his tutorial on How to Read an RSS Feed With 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.

File Structure With 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.

  1. <!DOCTYPE html>
  2. <head>
  3.    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  4.    <title>Cross Distinction Demos - jQuery RSS Accordian</title>
  5. </head>
  7. <body>
  8.    <?php require_once "includes/functions.php"; ?>
  9.    <aside>
  10.       <?php getFeed('http://jsimp90.wordpress.com/feed/');?>
  11.    </aside>
  13. </body>
  14. </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.
  • in our aside, we’re calling our getFeed function and passing it the RSS feed url.
  • 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:

Browser Screenshot of RSS Feed

 

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.

Go to http://jqueryui.com/demos/accordion/.  Take a minute to look at the different features that jQuery UI offers.  We’ll be using the default functionality.

Once you’ve looked around a bit, click on the download tab.Screenshot of jQuery UI

Click “deselect all components”.

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:

File Structure jQuery UI

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:

  1. <!DOCTYPE html>
  2. <head>
  3.    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  4.    <title>Cross Distinction Demos - jQuery RSS Accordian</title>
  5.    <link type="text/css" href="plugins/css/ui-lightness/jquery-ui-1.8.17.custom.css" rel="stylesheet" />
  6.    <script type="text/javascript" src="plugins/js/jquery-1.7.1.min.js"></script>
  7.    <script type="text/javascript" src="plugins/js/jquery-ui-1.8.17.custom.min.js"></script>
  8. </head>
  10.    <body>
  11.    <?php require_once "includes/functions.php"; ?>
  12.    <aside>
  13.       <?php getFeed('http://jsimp90.wordpress.com/feed/');?>
  14.    </aside>
  16. </body>
  17. </html>

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>:

  1. <script>
  2. $(function() {
  3.    $( "#accordion" ).accordion();
  4. });
  5. </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.

Your final index.php file should look like this:

  1. <!DOCTYPE html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  4. <title>Cross Distinction Demos - jQuery RSS Accordian</title>
  5. <link type="text/css" href="plugins/css/ui-lightness/jquery-ui-1.8.17.custom.css" rel="stylesheet" />
  6. <script type="text/javascript" src="plugins/js/jquery-1.7.1.min.js"></script>
  7. <script type="text/javascript" src="plugins/js/jquery-ui-1.8.17.custom.min.js"></script>
  8. </head>
  9. <body>
  10. <?php require_once "includes/functions.php"; ?>
  11. <aside>
  12. <?php getFeed('http://jsimp90.wordpress.com/feed/');?>
  13. </aside>
  14. <script>
  15. $(function() {
  16.    $( "#accordion" ).accordion();
  17. });
  18. </script>
  19. </body>
  20. </html>

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

Screenshot After UI

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.

Final File Structure

Copy the following into style.css

  1. aside{
  2.    font-size:.7em;
  3.    width:20%;
  4.    float:left;
  5. }
  6. aside p a{
  7.    font-size:.9em;
  8.    float:right;
  9.    margin-top:10px;
  10. }

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.

This entry was posted in Coding, How To, jQuery, RSS Feeds by Pat Brown. Bookmark the permalink.

24 thoughts on “Display RSS Feed Using jQuery UI Accordion | jQuery RSS Reader”

  3. Great tutorial, thanks!

    When a post is expanded, it does not always scroll to the top of that post, so what you see on the screen is a lower part of the content and you have to scroll back up to the start.

    Is there a fix for this?

    Thanks!

    • 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:

      1. on activate:
      2. get the scrolltop value of the section
      3. set the scrolltop value to that of the section

      Hope that helps!

  4. Hi, great tutorial thanks!

    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.

    Thanks!

    • 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

      1. $(function() {
      2. $( "#accordion" ).accordion();
      3. });

      to

      1. $(function() {
      2. $( "#accordion" ).accordion();
      3. $( '#accordion p a' ).text( 'More...' );
      4. });

    • 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.

        Thanks

        • Jay that’s a great question. To fit your solution, all you would have to do is write the following (using your urls) wherever you want your feed to appear:

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

          Every time getFeed() is called, it will create the div with a class of “accordian” for each feed. jQuery will then convert each div to an accordian.

    • Absolutely. You can do this one of two ways:

      1. Change the div id to a class and then use $( “.accordion” ).accordion() — note the period (.) in place of the hash(#)
      2. Simply give the second accordian a different id and add $( “#second-accordian-id” ).accordion() where “second-accordian-id” is the id of the second accordian

  8. Hi! Thank you so much for the tutorial! , i have learned a lot of this, one question.. how do i set up the links “read more” that you have.. mine dosent work. Thank you ! / Cheers Rasmus

    • Thanks Steve. If you have access to your theme files in for wordpress you can do the following:

      • Copy the “includes” folder and “plugins” folder into your wordpress theme folder
      • Put

        inside your theme file where you want the feed to display in wordpress

      • Make sure you link your stylesheets and your scripts in the head of your theme files – check out using jQuery in WordPress to make sure the accordian works correctly
      • Copy everything in style.css to the style.css in your theme folder

      I think that covers everything. If you have any issues with it please let me know.

      • 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.

        • I apologize for the late reply. Did you find a solution to this yet? If you have feel free to post it, otherwise I’ll try to do another tutorial incorporating it into WordPress.

Leave a Reply