jQuery Accordion Menu for WordPress
I searched everywhere but couldn’t find a simple jquery accordion menu plugin for WordPress, so I made one. I hope you find it useful! A demo is on the left. Please use the form below to leave me any comments questions and I’ll try to answer them as soon as I can.
Description
Accordion Menu is a simple jquery accordion menu plugin for WordPress. It enables an accordion menu for your Pages sidebar widget. It works for upto 3 levels of hierarchy.
Installation
- Upload accordion-menu to the /wp-content/plugins directory
- Activate the plugin from the Plugins menu in WordPress
Usage
- Pop a Pages widget into your sidebar. You can do this from the Widgets menu in WordPress. Your theme should support widgets.
- Customize the CSS to suit your purposes.
You’re a genius – thanks!!!
I’m in the process of updating my blog so this is great
Nice men!!! thx
What the widget name ? I cant faind it
Use the WordPress Pages widget.
sory, but it don’t worked … http://glamour.webcreative.kz/index.php … I use the pages widged
It doesn’t look like your theme uses the classes generated by wordpress. For the pages widget it is – widget_pages – the plugin works with this class. Adding that should fix the problem. Let me know if that helps.
I love the idea for this plugin but i can’t seem to get it to work. I’m sure i’m doing something wrong, but i can’t figure out what.
This site:
http://www.sanquentintrust.org/
I have the plugin installed and activated and am using the standard WordPress Pages widget in the sidebar. Any thoughts?
Seems like the same problem as Deeves. See if you can insert the default class that WP generates for the widgets – widget_pages. You should be able to do this in functions.php as below, notice the %2$s:
register_sidebar(array('before_widget' => '<li id="%1$s" class="widget %2$s">',
'after_widget' =>'</li>',
'before_title' => '',
'after_title' => '',
));
Let me know if that helps.
hi,
I like the menubar.
I’ve installed it. But I am no programmer.
Can you help me to get in on my site.
Thanks in advance.
the correct Url
Your sidebar html should look something like on the FAQ: http://bruzed.com/accordion-menu/about-the-plugin/faq/
Notice that the entire widget is wrapped by ul, li as opposed to div tags. This can usually be altered in functions.php. Hopefully this helps, if not send me a copy of your theme.
Hi Bruze!
Thank you for trying to help. That’s my functions.php… I inserted the code, but it fails. May be worth making a separate widget for this plugin?
That’s my functions.php… http://dl.dropbox.com/u/1763497/tz/functions.php.txt
))
Hi Deeves, I’ve modified functions.php so that it works. You can grab it here: http://drop.io/84zwbvb. The ZIP also includes sidebar.php with an example how I implemented it. I created a new widget area called Menu and inserted the pages widget in there. Your functions.php seems to be overriding a lot of the defaults which is why the plugin doesn’t work out of the box. I wouldn’t mind making it a separate widget if there’s enough demand for it, maybe the next version =)
Fantastic plugin. Question for you. Can it be configured to only dislay sub pages in the sidebar and their children. I am trying to create a menu where the main is a horizontal menu and the children on the sidebar.
Hope you can help.
Cheers
Bruze, when I use your files, I saw this http://glamour.webcreative.kz/
be a another plugin broken?
deeves, you could try turning off all your plugins and putting them on again to check if there’s a conflict.
@stuart i posted some code in the FAQ to answer your question. let me know if that works for you.
Hi!
I set the page order for displaying, but it doesn’t work. Maybe it’s not implemented.
Could someone confirm or deny it?
Thanks
Looks like I need go to Administration > Appearance > Widgets and define “Sort by” on Pages Widget?
@marco it should show up if you’ve got the pages widget in your sidebar. is it not showing up?
make this plugin for sub categories too
Great!~
Hi Bruce,
thank you for this excellent plugin – great work!
I noticed that the menu refreshes whenever I click on a child element.
Example:
About
–Me
–my cat
–my car
If I click on “Me”, the Menu doesn’t stay but instead loads again. Is it possible to load the content of “Me” without reloading the Menu?
It might be more elegant that way.
Thank you, again, for your work.
Peter
Hi Bruzed thanks for a fantastic plugin. I was just wondering whether there is anyway I could apply it to the category widget instead of the page widget.
Thank so much
Great Plugin!
Anyways I have a question: I want to to have the pages with subpages also being accessible. Now when you click on a top-tage only the subpages appear in the menu but the page itself doesn’t show up. How can I do that?
Thanx for your help
Pascal
@peter clicking on a child element loads that page and hence reloads the menu with the correct item open. it seems like what you want to achieve is loading content without refreshing the page which is out of scope of this plugin.
@veronica there’s 2 ways you can do that – 1. hack the plugin and change the div ids to that of your categories widget. 2. add the categories widget through code with same the div ids as the pages widget.
@pascal i’m not sure i understand what you’re trying to achieve. the subpages upto 3 levels of hierarchy should show up. is that not happening?
I see – thanks anyways! Still a great widget!
Is there anyway to set it so if you click the parent page of the currently open element it will close again (instead of having to click another parent element to close it?)
Great plugin, by the way!
I didn’t waste time in giving this plugin a 5 star. I does the magic and it does it so well.
To have it customize to work with categories, edit accordion-menu.js and change li.widget_pages to li.widget_categories.
Bruce, @pascal is asking if it’s possible to make the page content reload when you click a parent item. For example, if I were to click “about the plugin”, the menu would expand below it, and the page would load the content for the parent “about the plugin” page. Does that make sense? Because I have that question too.
Thank you.
Hi Bruce
Is it possible to have the top menu item page load and show its content as well as expand the submenu. eg. In your menu above clicking ‘About the plugin’ would show an ‘About the plugin’ page with its own content as well as reveal the sub pages in the menu.
Thanks
Byron
love this plugin… but yeah, I lose the content of the Parent page… hmmmm
great plugin
but i cant get it to link my first page if it has sub pages
so if i have a (page1 and it has subpages page1.1 page1.2) only the sub´s link´s work and i need page1 to work too…. how!!
and an other thing, how can i remove the pages headline in the top it bothers me
Hi, I was wondering if one of the links in the menu could be to the Blog section of a wordpress site? I want to have a menu that has links to the pages as well as a link to the blog bit. Can anyone advise me on if this is possible using this plugin?
No worries, I have figured it out after a little bit of tinkering. Thanks again for a wicked jQuery Plugin!!
@michael thanks! currently there’s no way to do that, that’s a great suggestion though. would you be interested in adding that?
Heya, is this a permissions issue? The plug-in installed and was activated without issue, but when editing the .js file, it is listed as “(inactive)” Any thoughts?
Nevermind…it was a theme issue. Didn’t work on a freebie we were using.
I can’t get the plugin to work. Could you please help me?
I’ve installed the plug in but it seems to reload quickly every time you navigate to a sub page page. Is it possible to save the state so this doesn’t happen. Here’s a link to my site, the pages in question are the sub pages of the portfolio section. Any help would be great, thanks!
http://www.marylousobel.com.au/home/
Hey Bruce, Great Widget!
Quick question before I download it and make a mess.
I am looking for an accordion menu EXACTLY like this, but I don’t want it to reference all the pages. I want to have control over the Menu Items and where they link to. Can your plugin do this?
If not, know of anything similar that can?
Thanks so much Bruce!
Great work.
it is posible to load page content when i click on parent?
exemple: clicking “About me” = expands menu and load page content.
This is a simple and elegant little plugin, I really like it. But when I go to a page, the sidebar menu loads expanded, and then contracts after a second which looks jerky.
Is there a way to fix this?
For example, I’m going to my website in progress (http://www.breakmastercylinder.com/bmc) and then clicking “Video”.
If you have any advice I’d appreciate it.
How do I get the parent to be a link?
Home (No link)
- Sub1 (links ok)
- Sub2 (links ok)
- Sub3 (links ok)
first, great plugin!
But I’m having a problem with the popular theme Atahualpa. The menu in the sidebars or widgets don’t work!
I know the problem is with the compatibility with the theme because i tested with default theme and work’s perfect. what can i do?
I’m not expert and sorry for my english if here is something incorrect.
from already, thanks from Argentina!!
If you want to get the parent button to link you to its page
the easiest way (that I found) is to open Bruzed’s
->accordion-menu.js file
->find the function initMenus() heading
-> go to the section of code that says jQuery(‘ul.accordion-menu li a’).click(function() {
-> and place a ul in front of the li & a tags
ex::::::
-> jQuery(‘ul.accordion-menu ul li a’).click(function() {
ex:
***original jquery code***
—————————
jQuery(‘ul.accordion-menu li a’).click(function() {
var checkElement = jQuery(this).next();
var parent = this.parentNode.parentNode.id;
if((checkElement.is(‘ul’)) && (checkElement.is(‘:visible’))) {
if(jQuery(‘#’ + parent).hasClass(‘collapsible’)) {
jQuery(‘#’ + parent + ‘ ul:visible’).slideUp(‘normal’);
}
***New jquery code***
—————————
jQuery(‘ul.accordion-menu >>>> ul <<<<< li a').click(function() {
var checkElement = jQuery(this).next();
var parent = this.parentNode.parentNode.id;
if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
if(jQuery('#' + parent).hasClass('collapsible')) {
jQuery('#' + parent + ' ul:visible').slideUp('normal');
}
Hope this helped…took me a little bit to figure it out, but it seems to work ok so far
@adrian awesome! thanks for sharing! =)
sorry i haven’t had time to respond to any comments. i’ll try and do that when i have some time. please help each other and enjoy the plugin! =)