The Awesome accordions plugin helps you to create nicely animated fully responsive and accessible collapsible panels. You can create multiple accordions and place them on your site by using shortcodes, no coding is needed.
It is the perfect solution for setting up a simple FAQ page or adding a simple accordion collapse into your content that allows you to show critical information first, shorten pages and reduce scrolling, while extra hidden content is easily accessible. Download it from the wordpress plugin repo
There are many WordPress plugins that can be used for adding accordions in your projects. In the past we used several plugins but we never found one that completely suits our needs so we decided to build our own plugin.
On this page you can read our philosophy on building this plugin.
In our coding we strive to make things inclusive and for this reason we focus on the perfect accessible code that can quickly be implemented in a website project. We prefer not to overcomplicate things so the starting point in this plugin is to implement a simple accordion that you can easily manage from the WordPress backend.
The frontend design is kept simple and is easy to modify if you have css knowledge. No two website projects are the same so we prefer you can easily change the fonts/colours yourself.
Before we started working on the plugin we created a list of basic requirements that we want to have in our plugin.
- Drag and drop interface Backend interface to easily create an unlimited number of accordions
- Shortcode for adding the accordion to your content
- WYSIWYG editor for adding content
- Option to switch between a toggle or collapse effect
- Compatible with any theme
- Hash option to link to a specific panel directly
- Translation ready, works with WPML
- Using a hidden post-type to create the accordions
- Option to disable the plugin CSS
- Import / Export option to easily copy accordion content
The accordion is a common design pattern that is used to organise large sections of content into areas that expand and collapse. They can be effective in making the user feel less overwhelmed, as they can choose what sections to read by opening them.
The primary reason to use an accordion is to compress a large amount of options into a limited space. If a page has too many items to fit into a limited space or when the number of items, if displayed all at once, would overwhelm the user. The accordion gives the user access to all of the items in digestible chunks and without requiring scrolling, which can remove the user from the context or page position they may prefer.
While accordions sound as an ideal alternative for presenting complex content, they are not a one-size-fits-all solution. they can best be used the number of options is large, the space is constrained, and the list of items can be logically grouped into smaller, roughly equal sized chunks.
Here you can read about the requirements and usage of the accordion pattern
When to use an Accordion
Before you start using an accordion think about the advantages and disadvantages of this pattern. The best place to start when deciding to use an accordion is to evaluate common and critical use cases for your audience. Understanding people’s scenarios will help you determine whether or not accordions are appropriate. Some of the most important considerations are listed below:
Here's a short checklist for you to decide if the accordion is the pattern to use:
- The user only needs to view one panel at a time
The nature of an accordion pattern makes it difficult to compare content across the different panels (since most of the content is hidden)
- The user is not expected to read all the content on the page
If you need a user to read all of the content then don't use an accordion, just let them scroll past the text without having them to interact with panels. Useful for long pages with paragraphs and headers which might not be interesting for all users
- The content is closely related to one another
Do not group unrelated items in one accordion, they need to have a common theme / topic
Anatomy of an Accordion
We are using a font-size of 16px and a padding of 24px in the panel.
The following requirements are based on well established best practices that we found online and in addition to those best practices we added some requirements that we find important in terms of usability. These requirements are based on our own research and experience.
The accordion should work propely in screen readers.
While changing the state of an accordion are usually visually apparent to users who can see the page, they may not be obvious to users of assistive technologies. We need to provide a way to programmatically expose dynamic content changes in a way that can be announced by assistive technologies. Read more about this in the codex
The accordion should work by touch.
The accordion should be operated by touch – on smartphones, tablets or desktops/laptops with touch screens.
the panel should be large enough for using touch and users should be allowed to click anywhere in the header area to expand or collapse the panel.
The accordion should be accessible for people using a keyboard.
Keyboard accessibility is one of the most important aspects of web accessibility but is often neglected. Nowadays, Most web interfaces are designed with mouse cursors and touch interaction in mind but there are a lot of people depending on keyboard accessibility:
- Users with motor disabilities who have difficulty using a mouse, using a touch device, or clicking on small things.
- Blind or visually impaired users frequently prefer to navigate websites with specific Braille keyboards.
- Amputees or those with congenital amputation (birth without a limb or limbs, specifically hands in this case) often use special hardware mimicking keyboard functionality.
- Anyone who simply doesn’t have access to a functioning mouse or touchpad.
Expanding and Collapsing panels
By clicking a panel heading the panel opens. You should be able to open multiple panels at the time and we want the user to give full control of the interface that's why we our default option is that the expanding or collapsing should be handled manually. The animation for expanding/collapsing should be subtle and last no longer than 250ms.
We use plus/minus icons to communicate the state of the block. Expanded has a minus icon and the collapsed state has a + sign.
By default the first panel will be expanded to communicate the behaviour of this panel.
Adding long texts in a panel
You should always have an overview of the accordion panels even when one expanded panel has a lot of content. Therefor the best option is to make the user scroll long texts in the panel.
Making it work with Print screen commands
When the print command is given the collapsed panels should be opened so that the hidden text is also printed.
Toggle All buttons
For accordions with a lot of panels we created toggle buttons to expand / collapse all panels at the same time.
We think it is never a good idea to show / hide content without the user intentionally doing it. So from that perspective we decided to keep the interactions intentionally by letting the user always expand/collapse the panels manually.
If you do decide to expand/collapse them automatically then we advice to only use this when all panels are visible in the page, otherwise there is a chance that the closing of the panel will happen outside of the viewport that may create confusion. So be careful with this and also keep mobile in mind with the scarcity of viewing space.
An accordion can have two states
The collapsed panel shows the header that should have enough information for people to understand what content they will find when they click it. Next to this header we see a + icon to indicate that this panel can be opened.
The expanded panel shows the hidden content, the header will have an active state and the icon will be changed to a - to indicate the panel can be closed.
On this page you can see an overview of projects where we implemented the accordion.
In the voice website we used it for a multi-language version of an FAQ section. The page has multiple shortcodes in the same page. For the multi-language version we made it work with WPML for easy translation of the content.
For this dutch website stopweeshuistoerisme.nl we implemented the accordion for the FAQ section. This accordion has the collapse option active so when one item opens the previous item will be closed automatically.
For the dutch website dementieweb.nl we used the accordion to organise longs lists of web links.
For the dutch website kinderrechten.nl we used the accordion to organise long lists of web links.
For the website moneytrial.org we used the accordion to organise many web links
For psychosenet.nl we implemented the accordion to organise a long list of web links
When to use tabs and when to use accordion (best cases)
Also for responsive the best way to use
Reponsive tabs to accordions example :
Accessibility and accordions