A while ago I found a great article on how to create a “stupid simple accordion” with jQuery. I thought I could use it on a few sites I was creating, so I created a wordpress plugin for it.
I have to give full credit to the original author as it’s all his idea and all I did was package his work up as a wordpress plugin.
Warning:
- The plugin conflicts with the wptouch plugin. You must run WPtouch in ” restrictive mode” to use the two on the same site.
- The plugin conflicts with nextgen-gallery in IE9 (possibly other IE versions)
I been searching EVERYWHERE for something this basic. I really liked “SlideDeck” plugin, but it doesn’t have the vertical option yet — for wordpress.
Thanks a bunch!!!!!
K
No problem K! If you would, let me know if you get the little bump at the end of the slide that I did. It could be smoother on my trial but I haven’t tinkered with it very much. I’d appreciate if you drop a link to your site so i could see it in action.
Currently just building within my XAMPP environment, but I’ll let you see when it’s live. There is a little ‘bump’ and not as smooth. If you figure anything out, let me know.
Thanks again.
How do you use this plugin? where are the instructions? Thanks.
Download it and read the readme file.
Hi Rusti, I’m realling enjoying re-working lots of ‘explanation’ section of the website using this plugin. I do have a question though – is it possible to nest buttons and content so that there is a hierarchy. At present when I open Button 2, Button 1 closes but when I open it again Button 2 is also open…I just need it not o close Button 1 first of all! I’m not hugely technical so hopefully there’s a simple solution… Thanks. Pete
BUTTON 1
Button 2
content
BUTTON
Button
content
I’m fairly sure this question has been addressed at the original site for the accordian. I know it will involve hacking around in the jQuery, but if you are comfortable with that, I’m pretty sure it’s a quick solution. Have a look at the link I supplied and you should find your answer.
Hello-
Total noob here. I’ve installed the plug-in, but I’m at a loss as to how to integrate it into a sidebar with a dynamically generated menu using
to generate the item list.
Basically I have a top level of pages with two levels of children that I want to collapse within the accordian. Any help appreciated.
That was meant to say [code]<?php wp_list_pages('sort_column=menu_order&title_li='); ?[/code]
This isn’t possible without filtering your wp_list_pages in a a way that is much more complicated than I’m able to do. An easier way would be to use jQuery to add the necessary divs to your output. How much jQuery do you know?
This plugin is great and thanks for this but for some reason it breaks the Headway 2.08 visual editor, It causes the visual editor to stop loading.
I can just disable and re-enable the plugin so it’s not the end of the world but they must share libs or something.
Thanks once again
Hmmm…I’ve never seen the headway theme from the backside, so I can’t help you. It must share a variable used in the jQuery, depending on how handy you are with jQuery, it might be a simple fix.
Thanks for the kind words, good luck!
It works great and i just disable the plugin when i need to do something in the headway visual editor.
I am using it here if you want a look http://h9k.co.uk/host/sage/beauty-pricelist/
Thanks for showing that, I’m glad it works well for you!
Have you ran into any trouble with the js not working? I’ve installed it, setup everything and I get a function error. Nothing opens or closes. Kinda strange.
No, the js works fine for me and a few others. jQuery conflicts are common problems though as many different plugins use the library. Start by researching the specific error, plug it into google and see where that leads for a start.
Thanks for this simple accordion plugin. Just what I needed.
Just a note, I noticed an extra in your example html here:
And So On…
If you paste the example code into a page to play with it, it’ll close your content div. Might throw some people off.
** an extra /div after “And So On…”
should have known better than to add html to a comment…. lol.
Have gone through a ton of code sites and plugins searching for something simple like this, and so far it seems to be working for what I need it to do, thanks!!
Question: Can you trigger a certain slide to drop down from the sidebar? I have a client who wants her navigation in the sidebar and for people to click a link there and have one of the sliders open to the left (make sense?) Is this possible? I was hoping it was something simple like referencing it somehow (like an anchor), but don’t know jQuery and can’t see the solution.
BTW, will post the site so people can see it in action once it’s launched!
Sorry Raielene, my part in this was creating the WP plugin out some code that was already available on the net. You could try the original author’s post on Stupid Simple Accordian and ask him. I’m sure it’s possible, but my jQuery knowledge is very low.
Best of luck!
Thanks. This was a -great- jumping off point for me to learn how to integrate jQuery into WP. I tweaked it a bit to allow it to work with WP List Categories… Works great. I hope you don’t mind. If anyone cares, I can publish the changes.
Glad you liked it! I’d love to see those changes, pop them in a comment.
Hi! Congrats! I think the plugin is great. I’ve looking for a long time something as simple and stupid like this
. Thanks!
However, I have a doubt/suggestion. If you click any link, accordion resets/closes. ¿How can I avoid it? I’d like keep showing the submenu which the user clicked on it.
I know this has been asked and answered on the original author’s site, check the comments on his page for the solution.
Thanks for the comment!
This is just what I’ve been looking for. I’m having a problem though, as the slides are fixed open and won’t close. I followed the instructions exactly, but there is no movement. Any Ideas?
My first reaction is that you have some conflicting javascript on the page? See if you can turn off any other scripts and see if that helps.
Well.. it appears that stupid simple accordion is the culprit. When it is enabled, my jquery slider on my front page won’t work. If I disable ssa, then java work fine. Weird. Any thoughts?
When you have conflicting Javascript, you have two choices…
1. Modify one so it doesn’t conflict.
2. Choose the one you like best.
I’m in the choice 2 camp, sorry I can’t help more. I’m able to change the script into a plugin, but I’m not skilled enough to write jQuery.
hi there!
your plugin is fantastic – but is there any chance to left the green (open) button out of the raw?
Thanks for the kind words. I’m assuming your first language is not English, can you rephrase it please? As I’m not sure what you’re asking.
sorry, was late in the night and – you are right. my native language isn`t english.
hope this one is more clear;)
this is my testing page:
http://backdrop.allyourbandneeds.com/?page_id=102
you can see your script working perfect here – and you will see also those green spots on the right side (with the “+” inside) which opens the answer.
any chance to change the buttons color or to disable the button completly?
I see, yes. If you know your way around CSS add this line to your stylesheet.
.accordionButton {background-image: none;}or find the image that is inside the plugin folder and replace it with your chosen one. That would be the best option, as hiding it with CSS can depend on which order your style sheets are in in your header.
there is an issue with your plugin and the wptouch plugin.
(wptouch makes a mobile website out of the WP installation for iphone etc).
if your plugin is activated – you are not able to open the MENU bar from the WP page shown by wptouch in the iPhone.
Disabling s-simple-a revert the wptouch to working proper again.
best
Thanks, I’ve made a note of that in the post.
hi there!
wptouch offers an option “run wptouch in rstrictive mode” whichdoes not allow other plugins to write code into the header.
I found this option – activated it and everything is fine now!
so no need to search for a workaround;)
would be nice if you can add that to your readme or whatever – so other users might find that hint as well!
hey there!
found another problem;(
I have nextgen-gallery on my WP running and sideshow with the pictures went great in all browsers but not in IE9 (and maybe other IE versions), but in IE9 the slideshow of the gallery freezes.
after de-activating Simple-Accordion the sldeshow works without any problem again. so its a conflict between those both plugin.
Dirk, You’re keeping me busy! Thanks for all the feedback, I’ll make a note of this in the notes.
Hi,
I notice from many comments that there seem to be occasional conflicts with other plugins running jQuery. I have found this to be the case when using s-simple-accordion in a Buddypress site running with Buddypress-activity-plus. The solution is fairly simple, and I offer it here because I think it may resolve other jQuery conflicts (perhaps even all of them!).
First: open s-simple-accordion.php and comment out (or delete) the section (lines 34 – 38) that calls for jQuery from the CDN repository.
** if( !is_admin()){
wp_deregister_script(‘jquery’);
wp_register_script(‘jquery’, (“http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js”), false, ’1.3.2′);
wp_enqueue_script(‘jquery’);
}
**
Second: open s-simple-accordion.js and wherever you see a Dollar sign ($) replace it with the string “jQuery” (minus the quotes of course)
Third: upload the two files into your WordPress plugins folder, and test. Hopefully everything should still work!
Anyway I hope this helps a few people.
Rusti – thank you for this plugin, simple is always best and this a beautiful solution.
Wow., great extension.. Thanks bro..
Thanks a ton mate, I’ve been trying to write a custom JS accordion for my site most of the day with nothing working. This works perfectly! Thanks again!