Accordion the new wordpress ajax widget to enhance your sidebar functions

Posted on November 13th, 2007 in General by daya

Accordion the new wordpress ajax widget to enhance your sidebar functions

We are happy to release Accordion the wordpress ajax widget that provides tabbed sidebar browsing for upto 6 plugins. You can see the demo here in our blog towards the right side bar, we have configured the plugin with 3 plugins, Popular post, Recent comments and recent posts. 

The biggest advantage of this plugin is that, it loads your wordpress site faster than before, it saves huge space, provides tabbed browsing inside your sidebar.

A widget which displays the output of other plugins, using the Accordion  the jQuery plugin.

You can download the widget from here, and configuration and the installation instruction are packed in the zip file. This wordpress widget is very easy to configure. 

 

This widget can take the output of up to six plugins. The plugins need to generate <li> items.

To install, upload the 'accordion' directory to the wp-content/plugins directory of your wordpress setup, then go to the wordpress admin panel, under 'Plugins' and activate the 'Accordion' plugin. To configure it further, go to Presentation -> widgets and drag the 'Accordion' widget onto one of your sidebars. Then click the little button on the widget to configure which plugins you'll use.

You'll notice a few controls:

Title - the title of the widget itself (optional).

Widget type - you may choose between using accordion or simple javascript tabs.

Before title and After title - These allow you to style the widget better by using style="" attributes. By default these tags are simply <h3> and </h3>. But you may use, for example: <h3 style="margin: 0; padding: 4px; background-color: blue; color: white"> for Before title.

List type - the type of list you want to be displayed: unordered (with dots) or ordered (with numbers). This is only in case your current theme requires it…

Plugin 1…6 - Click on these tabs to configure each plugin individually: each plugin has a function it calls and a title (which is displayed on its tab).

after configuring at least two plugins, it should be displayed in the sidebar you selected.

Popularity: 15% [?]

68 Responses to 'Accordion the new wordpress ajax widget to enhance your sidebar functions'

Subscribe to comments with RSS

  1. rs.choudry said,

    on November 13th, 2007 at 5:27 pm

    fantastic plugin, i was looking for something like this for a long time, can you please tell me how do i increase the side bar size

  2. Mario said,

    on November 14th, 2007 at 6:27 am

    The download does not appear to be working.

  3. Jeremy said,

    on November 14th, 2007 at 12:58 pm

    Could you please upload the screenshot as a .png file instead? For you, it is a huge waste of bandwidth. For us, it makes it download really slowly.

    PNG files don’t degrade in quality, unlike JPGs, so it is perfectly safe.

  4. daya said,

    on November 14th, 2007 at 4:18 pm

    http://www.spicyexpress.net/acco.zip you can download from there.

  5. vihali said,

    on November 15th, 2007 at 12:36 pm

    How can I find the function of each plugin?

  6. Ozh said,

    on November 15th, 2007 at 12:53 pm

    Daya, when you’re asking for feedback on wp-hackers, it would be nice if you at least said “hmmkey thx” when you receive some :-/


  7. on November 15th, 2007 at 1:35 pm

    Hi, I get the following error when trying to set this wonderful-sounding plugin up:

    Parse error: syntax error, unexpected $end in /home/spichin2/public_html/wp-content/plugins/accordion/accordion.php(65) : eval()’d code on line 1

    Any help would be appreciated! Thank you.

  8. JHS said,

    on November 15th, 2007 at 1:50 pm

    “Plugin 1…6 - Click on these tabs to configure each plugin individually: each plugin has a function it calls and a title (which is displayed on its tab).”

    Sorry, but you need to explain this more clearly. I click on “Plugin 1,” etc. and nothing happens. What is the plugin supposed to do at that point and what information am I supposed to add? For instance, I want to use this to display my most popular articles using Alex King’s Popularity Contest plugin. So how should I do that? Step-by-step instructions are required.

    Thanks.

  9. Tan The Man said,

    on November 15th, 2007 at 2:06 pm

    Gotta love the AJAX.

  10. adrian said,

    on November 15th, 2007 at 3:08 pm

    Hi there. Looks great but ran into same problem as JHS at the last step - configuring up to 6 plugins. Nothing happens in either Firefox or IEv6 when you click on these Plugin 1 - 6 links. Any ideas why?

  11. Dric said,

    on November 15th, 2007 at 4:03 pm

    Hi,
    I’ve got the same problem as Spicy Cauldron, the parse error.

  12. daya said,

    on November 15th, 2007 at 7:29 pm

    Alex King’s Popularity Contest plugin, in the function tab you need put this command “akpc_most_popular();” that in the normal php function you remove that is all.

    if you are using brians latest comments you in the function coloumn you need put get_recent_comments(); here again please note, you should not use .

    similarly for recent post you use c2c_get_recent_posts(10); that is all. I hope i am clear now.

    If you are using php functions with you will get parse error.

    Please let me know if there is any other information you require. Sorry for trouble i shall update the read me file accordingly.

    regards

    daya

  13. vihali said,

    on November 15th, 2007 at 8:33 pm

    Yes, I think everybody knows we should type a command there but the most important thing is that how you found those functions.

    I’m going to use
    - FreePress recent comments widget
    - WPG2 grid box to display recent pictures
    - Recent posts widget that is built-in inside WordPress.

    Thanks a lot!

  14. Chris said,

    on November 15th, 2007 at 11:05 pm

    Very nice plugin. Well thought out, well executed, great job. I’m going to see if I can implement it on some of my sites in the future. Thank you.


  15. on November 16th, 2007 at 7:38 am

    I love the concept, but when I put the code on the function line as you suggested, this is what I get:

    Parse error: syntax error, unexpected T_STRING in /home/hopefulspirit/public_html/wp-content/plugins/accordion/accordion.php(64) : eval()’d code on line 1

  16. Ajaxpert said,

    on November 16th, 2007 at 5:39 pm

    here is great tutorial for AJAX
    http://gohil.dharmesh.googlepages.com/ajax.html

  17. jez said,

    on November 16th, 2007 at 10:29 pm

    I dont get it, what does it do?
    I always supply demos for my themes, not sure if you could do the same for your plugins?

    good work anyway,
    jez

  18. FKI said,

    on November 17th, 2007 at 2:20 am

    I’m looking forward to using this, but I don’t use widgets. What’s the php code to install this in my sidebar manually?


  19. on November 17th, 2007 at 9:18 am

    Hey… thanks for a great plugin! But… you are not clear about where to find/how to write functions properly. I saw you listed some for popular plugins. But… where did you get them… how did you know what function to write? I looked in the PHP file for Brians Recent Comments, but did not see where the function was located.

    Thanks - Scott

  20. daya said,

    on November 17th, 2007 at 9:54 am

    Thanks to everyone for the suggestion. I have updated the plugin with inbuild help and tips, I am sure it would solve all the problem and make the configuration of this plugin easy.

    Scott, if you the read the usage in Brians Recent comments, you will see instruction to call the plugin as follows

      < ?php blc_latest_comments(); ?>

    but, here in Accordion all that you need put in the function field is blc_latest_comments that is all, rest the plugin does automatically.

    FKI please update your wordpress to lattest version, and its automatically provides widgets support.

    JEZ you can see the demo right in this blog. I use all the plugin i have developed right here.

  21. daya said,

    on November 17th, 2007 at 9:55 am

    you can download the lattest version from here http://www.spicyexpress.net/acco.zip

  22. vince said,

    on November 18th, 2007 at 4:33 am

    sorry but it doesn’t work :

    Parse error: parse error, unexpected $ in
    /wp-content/plugins/accordion/accordion.php(64) : eval()’d code on line 1

    like others ;) i tried a lot of thing ! HELPPPPPPPP plz

  23. daya said,

    on November 18th, 2007 at 10:02 pm

    can you please tell me what plugin you are trying to use and what input you had given in the function field? so that, i can check and comment about it. I am sorry for the trouble, but till you give me more details, it is very difficult for me to help you.

  24. vince said,

    on November 18th, 2007 at 11:58 pm

    no prob. I have this version http://www.spicyexpress.net/acco.zip :) i try all possibility in function field … the last is : mdv_recent_comments

    thanks a lot for your help :)

  25. vince said,

    on November 19th, 2007 at 12:18 am

    my theme is base on bloggingpro theme and i use no plugin it’s directly on the theme (i think) .. in my sidebar i call mdv_recent_comments(); and it works but not in your plugin

  26. daya said,

    on November 19th, 2007 at 12:23 am

    Dear Vince, Sorry to know that, if you using get recent comments plugin from here http://blog.jodies.de/archiv/2004/11/13/recent-comments/ then in the function field you need to use this command get_recent_comments(); if you are using Brians lattest comments and then in the function field, you need use this command blc_latest_comments();
    nemuritor_de_foame: or
    nemuritor_de_foame: blc_latest_comments(10);, but brians lattest comments seems to be displaying latest commented posts. so if you could let me know the plugin you are actually using, i guess, i could be more helpful.

  27. vince said,

    on November 19th, 2007 at 12:31 am

    i find info about my plugin in function.php
    Plugin Name: Recent Comments
    Plugin URI: http://mtdewvirus.com/code/wordpress-plugins/
    Description: Retrieves a list of the most recent comments.
    Version: 1.18
    Author: Nick Momrik
    Author URI: http://mtdewvirus.com/

    the begin of this files is :
    if (function_exists(’mdv_recent_comments’)) {
    }else{

    but if i put mdv_recent_comments in function field in your plugin it doesn’t work

  28. daya said,

    on November 19th, 2007 at 11:06 am

    dear vince, please put this comment mdv_recent_comments(); in the function field. regards daya

  29. Vince said,

    on November 19th, 2007 at 4:40 pm

    thanks a lot ;)

  30. Vince said,

    on November 19th, 2007 at 4:58 pm

    thanks a lot ;) it works for comments .. but i don’t understand why it’s not working with recent post i put : mdv_recent_posts();

    grrrr

  31. daya said,

    on November 19th, 2007 at 6:53 pm

    can you tell what error message you are receiving also please check whether the plugin is active. I tried it is working with mdv_recent_posts(); regards daya

  32. Orobi said,

    on November 19th, 2007 at 7:30 pm

    Hi! Is there a way to display only posts from a SINGLE CATEGORY using mdv_recent_posts()?
    I’d like to show posts from a category into a Tab (maybe video) and other posts from another cat into another Tab (photo).
    Tnks :)

  33. Vince said,

    on November 20th, 2007 at 12:26 am

    it works with the widget or when i put the code in my sidebar but not when i use in your plugin i don’t understand

  34. daya said,

    on November 20th, 2007 at 2:19 am

    Vince, I guess, you better use recent post plugin from here http://www.coffee2code.com/archives/2004/08/27/plugin-customizable-post-listings/ and use the function as follows for the plugin, feel that should solve the problem and the plugin is much better than what you have now. here is the function you need to use c2c_get_recent_posts(10);


  35. on November 28th, 2007 at 12:37 am

    Hi Daya -
    Is there a way to know precisely, the call for ANY other plugin we wish to use with Accordian? You have done a great job of documenting some plugins calls (thanks), but it would be good to know how to call ALL plugins in the proper way so they will work within Accordian.

    Thanks, Scott

  36. daya said,

    on November 29th, 2007 at 8:49 am

    Dear Scott,
    Thanks for your comments, It is very simple. If you read the documentation of the plugin you wanted to use you will defined find the php code to be used under usage section. Normally it would be something like this “” in this all that you need to do is that to, remove “” in the end use the rest as function slot of the accorditon plugin management. i.e you will simply use get_recent_comments();. similarly for any plugin you can do the same.

  37. fliespess said,

    on December 2nd, 2007 at 5:02 am

    Thankiossi
    It’s great

  38. Wenrytainna said,

    on December 2nd, 2007 at 5:45 pm

    Thankiosst
    Great!

  39. Attegiace said,

    on December 3rd, 2007 at 8:30 am

    Thankiossk
    Cool!

  40. Nignmincini said,

    on December 5th, 2007 at 11:05 pm

    thankiosso
    Cool!


  41. on December 6th, 2007 at 2:48 pm

    lol
    thankiossp!

  42. marvin said,

    on December 7th, 2007 at 11:39 pm

    can you please make similar plugin for bloxpress

  43. daya said,

    on December 8th, 2007 at 10:09 am

    Marvin, I am sorry to at this time, i do not have plan to develop block for bloxpress, however, i guess, bloxpress.org has some guidance converting the plugin to block, you can try that. Else, if you wait for a fortnight, you can use our theme highly ajax enhanced wordpress theme meyshan which will be released to public. thanks again for visiting spicyexpress.net regards daya

  44. ant said,

    on December 11th, 2007 at 5:21 am

    I have downloaded your plugin and have got it working, but am having issues getting it to show pages any help would be great. thanks

  45. daya said,

    on December 12th, 2007 at 1:05 am

    hi. can you please give me blog address also, let me know, are you using any plugin to display pages,if yes, may i know what plugins is that. let me also know what is your input in the function field. regards daya

  46. ant said,

    on December 15th, 2007 at 5:14 am

    daya
    I got the the pages to show with wp_list_pages(); but for some reason I can only get the tabs working, the accordion (which is what I what) is not working http://www.spatialdesign.ac.nz/blog. it just list the pages, not accordioned. I have another WP site and it works fine
    there (www.apelosi.com/blog) any help would be great
    thanks

  47. ant said,

    on December 15th, 2007 at 10:24 am

    I got the pages working with wp_list_pages(); (could be good to add to the help) but had a problem with a conflict of another plugin “nextgen gallery” http://alexrabe.boelinger.com/ if you have both activated then the accordion feature stops working and just expands the list out.

    also am having problems adding “meta” to the menu as well, do you know what the code for that is

    thanks so much for a great plugin

  48. ant said,

    on December 20th, 2007 at 3:16 am

    I have sorted out the pages showing, but I have a conflict with nextGEN gallery http://alexrabe.boelinger.com/wordpress-plugins/nextgen-gallery/
    which stops the accordion action working, tabs still works. the all pages are shown.

  49. daya said,

    on December 21st, 2007 at 4:51 pm

    i tried and understood. You need to tweak either accordion plugin or next gen gallery plugin because. both of them use jquery and both of them injecting jquery which is actually causing the conflict. Re-direct next gen to js files to your common js files, or to accordion js folder. Once you do that, both will work.
    if you still have problem let me know, i will edit the next gen for you.

  50. ant said,

    on January 8th, 2008 at 3:38 am

    that is over my head, if you could please tell me how to edit the nextgen plugin that would be magic. thanks so much

  51. ant said,

    on January 8th, 2008 at 3:45 am

    thanks for that daya, edit a plugin is a bit over my head, if you could show me what parts to edit and what to change them to please. thanks so much.

  52. mog said,

    on January 10th, 2008 at 7:55 pm

    Fantastic plugin, ..just does what i want, thanks, ..however, all of my expanded ’s all have an inline style height of 280px, and i cannot change this, ..so i am getting a lot of blank space.

    I have searched all of the files and i cannot find a control for this or overide it, ..please help…

    http://www.mogmachine-hosting.com/drh/
    (click on ‘Artland’ on the left)

  53. daya said,

    on January 11th, 2008 at 11:48 pm

    Hi, Ant,

    It is very simple, you need to choose, the next gen gallery to choose the jquery effect not the light box effect, i have integrated next gen gallery along with accordion, in my another blog and it is working fine http://blog.19hourit.com
    please check.

  54. daya said,

    on January 12th, 2008 at 12:00 am

    Mog, I saw mogmachine website, when i clicked artland, i saw gift and simplicity, is that what you mean? you seems to be using lots of js in the header. like light box, and protype and mootools. and for accordion it needs thickbox, jquery. but that should not be the issues, if you can tell me what exactly you need there, i can help you

  55. mog said,

    on January 13th, 2008 at 12:52 am

    Ok, …thank you for looking at this for me, ..on:
    http://www.mogmachine-hosting.com/drh/
    Look in the source code at line 131:

    <div id=”accordiondiv”><h2>Artland</h2>

    …after this is an empty <div> tag that when you click on the ‘Artland’ menu item expands to contain the <ul> with the menu items in it.

    If you look at this <div tag> in firebug you can see that something (i assume javascript) has added data to it so it becomes:

    <div style=”height: 280px; display: block;”>

    I just have no idea where the 280px comes from, …and this is what is messing things up as it is forcing much larger than it should be with a height:auto

    please tell me where this embedded css is generated from as i cannot find it in the JS files.

    Thanks.

  56. mog said,

    on January 14th, 2008 at 7:35 pm

    Hi, ..I guess as you have not got back to me, and this is now getting pretty important to me to fix, i would give you some more information.
    I have narrowed the problem down to :

    accordian.php, line 38
    The div tag created here is empty of style,. ..but by the time it is outputted to the page it has a height style embedded.

    I need to find out where this comes from, …i assume it is in jquery.accordian.pack.js ….but as i cannot read this compressed version i cannot alter it.

    Please either send me a modified version that sets the height to ‘auto’ of send me the uncompressed version so that i may mod it.

    Your quick response would be appreciated as i need to make this site live soon and this menu is a key part of the functionality.

    Thanks.

  57. daya said,

    on January 15th, 2008 at 1:27 pm

    you can download the revised plugin for you from here http://www.spicyexpress.net/accordion.zip hope this solve the problem. you will have all the js, and css files, where you can alter the files. if you still have problem, today, entire day, i would be online, talk to me through yahoo meyshanworld

  58. RYK said,

    on March 11th, 2008 at 4:52 pm

    how about a refresh option within the sidebar widget? It’s very handy on an active blog when tracking Recent comments.

  59. daya said,

    on March 12th, 2008 at 11:34 am

    i will work on this, you can except a update very soon

  60. Nick said,

    on March 13th, 2008 at 6:02 pm

    Hi … how do i get a rollover effect on the h2 i have used that toggle the accordion effect?…thx

  61. Faidon said,

    on March 16th, 2008 at 8:31 pm

    Hello, great potential, did not work for me.
    I activated the plugin and then I went to configure it in widgets. The message from IE was “Cannot open widgets.php” and I was kicked out of my website…

  62. daya said,

    on March 26th, 2008 at 3:27 pm

    Nick, just choose on the widget type, either tab, or jquery accordion. Faidon, i really do not understand the probem, can you please explain, so that, i could do the needful. regards daya

  63. daya said,

    on March 26th, 2008 at 3:31 pm

    nice roll over effect i saw here http://nicklansdell.com/

  64. soni said,

    on March 29th, 2008 at 2:14 am

    good plugin

  65. Roman said,

    on May 4th, 2008 at 11:52 pm

    Hy! I have tested the plugin! I does work, but there may be a little bug, because the mouse cursor don´t change to the hand when rolling over the panel!

  66. Roman said,

    on May 5th, 2008 at 1:18 am

    i withdraw my problem! I learned hot to set the cursor to hand! with your accordion plugin!

  67. Neitham said,

    on June 25th, 2008 at 5:57 pm

    Great plugin. Is there any way to put borders for the content box? Thanks!

  68. Fareeha said,

    on June 26th, 2008 at 9:27 am

    The plugin looks cool. But I couldn’t use it. After activating the plugin from the in the plugins panel when I come to widget panel, the panel reports following error…
    “Fatal error: Cannot use string offset as an array in C:\Program Files\Apache Software Foundation\Apache2.2\htdocs\wordpress-2.5\wp-content\plugins\accordion\accordion.php on line 51″

    What should I do? I’m using Wordpress 2.5

Post a comment