The term «accordion» to describe the interactive web presentation type I’m covering in this article is derived from the musical instrument of the same name. More specifically, it refers to a particular type called chromatic button accordion, as shown in the image shown above, where different sections open and close. The image of a woman playing a small chromatic button accordion is courtesy of ウィキ太郎 (WikiTaro) and is in the public domain. There are at many advantages of using accordions in websites.
The main advantages of using an accordion on a website include:
- Space optimization: It avoids overwhelming users with large amounts of text, showing only what is necessary.
- Interactivity: It allows users to control the content they want to see, increasing interaction. Visitors click on the desired section to open it.
- Responsive/adaptable design: Accordions are an excellent solution for navigation on small screens (i.e. smartphones and smaller tablets), better organizing subsections.
- Great for FAQ (frequently asked questions).
- Great SEO (search engine optimization, visibility and discoverability) when implemented and configured properly.
Although I realize there are many different possible tools and techniques to create accordions on a WordPress website, I have stayed with the combination of the free Elementor accordion together with Rank Math Pro for SEO. The reason for using the free Elementor accordion as opposed to its alternatives to create accordions is because it allows more aesthetic control, without the need for any manual CSS, compared with the alternatives I have seen. When I say the esthetic control, I mean (among other things) the capability of dictating the behavior of the opened and closed sections, both initially and during user interaction, as well as the colors and spacing offered.
Four examples where I have used accordions
Ahead are four examples where I have used accordions. All of them are static screenshots, but are linked to the corresponding source web pages so you can test the interaction when clicking different sections. The first two start with all elements closed in advance. The third and fourth intentionally start with the first element already opened in advance.
Above, a partial screenshot of the FAQ page from the TecnoTur.LLC website in English. Initially, all elements are closed.
Above, a partial screenshot of the FAQ page from the TecnoTur.LLC website in Castilian. Initially, all elements are closed.
Above, a partial screenshot of the home page of the TecnoTurPublishing.com website in English. The first element is already open when accessing the page and the color change I chose is already visible.
Above, a partial screenshot of the home page of the EditorialTecnoTur.com website in Castilian. The first element is already open when accessing the page and the color change I chose is already visible.
Proper SEO implementation considerations
In this case, SEO (search engine optimization) means that we want the entire contents (even the portion which is hidden) to be visible to search engines like Bing and Google. This is to facilitate people finding or discovering the content on our websites.
Considering that I use Rank Math Pro for SEO for other reasons on certain websites I develop and maintain, and the fact that Rank Math has specifically warmed us in its instructional video to only activate the option visible in the lower left of the above screenshot: Add FAQ Schema Markup (not to active the corresponding one above it, which is from Elementor itself) to avoid schema errors, that’s what I do.
Lee este artículo en buen castellano
(Re-)Subscribe for upcoming articles, reviews, radio shows, books and seminars/webinars
Stand by for upcoming articles, reviews, books and courses by subscribing to my bulletins.
In English:
- Email bulletins, bulletins.AllanTepper.com
- In Telegram, t.me/TecnoTurBulletins
- Twitter (bilingual), AllanLTepper
En castellano:
- Boletines por correo electrónico, boletines.AllanTepper.com
- En Telegram, t.me/boletinesdeAllan
- Twitter (bilingüe), AllanLTepper
Most of my current books are at books.AllanTepper.com, and also visit AllanTepper.com and radio.AllanTepper.com.
FTC disclosure
None of the listed individuals or companies mentioned above has paid for this article. Allan Tépper earns royalties on the sales of his own books. Some of the manufacturers listed above have contracted Tépper and/or TecnoTur LLC to carry out consulting and/or translations/localizations/transcreations. So far, none of the manufacturers listed above is/are sponsors of the TecnoTur, BeyondPodcasting, CapicúaFM or TuSaludSecreta programs, although they are welcome to do so, and some are, may be (or may have been) sponsors of ProVideo Coalition magazine. Some links to third parties listed in this article and/or on this web page may indirectly benefit TecnoTur LLC via affiliate programs. Allan Tépper’s opinions are his own. Allan Tépper is not liable for misuse or misunderstanding of information he shares.