*UPDATE – This post is pretty old, and while that plugin still exists, I never use it. I built all my WordPress sites with a theme called Total. It’s amazing and has an accordion module built in. If you need a new website and want to add accordions, try Total.
Accordions are extremely useful for organizing and displaying large amounts of content without cluttering the page, and make it easy for the user to find what they’re looking for. You’ve most likely seen an accordion in use on a website several times before. They look something like this:
Accordions in WordPress
I find it simplest to use an accordion shortcode plugin. This will add a new icon to your editor toolbar which you can use to insert the shortcode.
The best accordion plugin
Of all the available choices, there’s one plugin I find to be the best. It’s concisely named Accordion Shortcodes. What makes it the best? In fact it’s only one little feature I think makes this better than most accordion scripts or plugins. It’s an option that tells a newly opened section to scroll to the top of the screen. Without it an accordion section with lots of text will open up and get pushed outside the screen’s viewport. This especially makes it downright unusable to open accordions on a phone or mobile device. Imagine always needing to swipe back up to the top of the text you just opened.
Above is a demo of the Accordion Shortcodes plugin that I’ve installed and styled on a client’s website. You can see when I click a section it opens and scrolls to the top for easy access; never pushing content out of view.
Out of the box this plugin isn’t styled, but you can add some css that the author provides on the plugin repository page. I went ahead and added my own styles to make it look how you see it above.
Have you tried this accordion plugin? Do you have a favorite?
This is great. One question though….
How did you get the (+) and (-) icons in there?
Can you share the css you wrote for this plugin?
Never mind, I figured it out.
Thanks for checking it out! I’m glad you figured out the icons. Just for anyone else wondering, they are images that I add to the title class as css background images. The titles have a class on open and close, so each class gets an image background.
Excellent point about the scrolling. I’d noticed that before when using accordions, but didn’t know there was a plugin that was smart about this. I’ll give it a try.
Thanks for reading! Oddly, very few accordions do this. This is also the default functionality for accordions in my favorite WordPress theme, Total. https://bravewhale.com/buytotal
Is your theme support nested accordian shortcode?
If you are referring to the theme I mentioned called Total, https://bravewhale.com/buytotal , then unfortunately no it does not. This theme uses Visual Composer for the page builder, so you might be able to find a plugin that adds this functionality, or use a shortcode from a different accordion plugin inside of this one.