*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?