An accordion stacks content into titles that open when clicked, so a long page stays short and visitors open only what they need. It is the usual choice for FAQs, help pages and feature lists.
The Accordion widget in The Plus Addons for Elementor adds templates, icons, hover and horizontal modes, search, pagination, autoplay and FAQ schema on top of the basic accordion.
Requirement – This widget is a part of The Plus Addons for Elementor, make sure it’s installed & activated to enjoy all its powers.
Before You Start
- Edition: Free, with extra features in Pro. The table below shows which.
- Widget to enable: Accordion, switched on under The Plus Addons > Widgets.
Learn via Video Tutorial
How to Activate the Accordion Widget
Go to The Plus Addons > Widgets, search for Accordion and turn on its switch.
Free or Pro?
| Feature | Free | Pro |
|---|---|---|
| Items with text, or an Elementor template per item | Yes | Yes |
| Toggle icon (Font Awesome / Font Awesome 5), Title Tag | Yes | Yes |
| Active Tab (which item starts open, or none, or all) | Yes | Yes |
| Icons Mind icons, an icon per item, Unique ID (anchor links) | — | Yes |
| Items from an ACF repeater | — | Yes |
| On Hover, Horizontal, Autoplay, Expand & Collapse Button, Search Bar, Slider & Pagination | — | Yes |
| Scroll Top, Stagger Animation, SEO Schema Markup, Carousel Connection ID | — | Yes |
In the free plugin, most Pro options are still listed, but turning them on only shows an upgrade notice.
Content
Content Source picks where items come from: Items (you add them here) or ACF Repeater (Pro). See how to build an accordion from ACF repeater data.
Each item has:
- Title — the clickable heading.
- Type — Content for text, or Page Template to show an Elementor template. With a template, Backend Visibility decides whether it loads in the editor (off by default, to keep the editor fast). See how to use a template.
- Show Icon (Pro) — an icon before this item’s title.
- Unique ID (Pro) — an anchor so a link can open this item. See anchor links.
Toggle Icon
Show Icon adds the open/close icon to every title. Alignment puts it on the left or right, Icon Font picks Font Awesome, Font Awesome 5 or Icons Mind (Pro), and each has a closed and an active icon. Title Tag sets the HTML tag of the titles (div by default). See how to add icons.
Special Option (Pro)
| Option | What it does | Guide |
|---|---|---|
| On Hover Accordion | Opens items when the mouse moves over the title | Hover |
| Horizontal Accordion | Puts items side by side. Not available with On Hover | Horizontal |
| Autoplay | Opens the next item every few seconds | Autoplay |
| Expand & Collapse Button | One button that opens or closes all items. Not with Horizontal | Expand/Collapse |
| Search Bar | A search box that filters items as visitors type | Search |
| Slider & Pagination | Shows a few items per page with previous/next. Not with Horizontal | Pagination |
Extra Option
| Option | What it does | Guide |
|---|---|---|
| Active Tab | Which item is open on page load: a number, 0 for none, or All Open. Default 1 | Closed by default |
| Scroll Top (Pro) | Scrolls the page to an item when it opens | Scroll Top |
| Stagger Animation (Pro) | Fades items in one by one when the accordion scrolls into view | Stagger |
| SEO Schema Markup (Pro) | Marks the items up as FAQ structured data | Schema |
| Carousel Connection ID (Pro) | Syncs the accordion with an Anything Carousel | Carousel sync |
How It Behaves
- Only one item is open at a time: opening an item closes the open one. Clicking an open item closes it.
- Active Tab All Open starts with every item open; after that, clicks work one item at a time.
- The Expand & Collapse Button is the only way to open all items after the page has loaded.
How to Style the Accordion
The Style tab has sections for the Icon, Title (typography, colours, background, border and spacing) and Content. Sections for Autoplay, Slider & Pagination, Search, Search Text Highlight and the Expand/Collapse Button appear when those options are on. Hover has two hover style presets for the titles.
The Advanced tab is the same as on other widgets. See the Advanced tab tutorial.
Troubleshooting
A Pro option only shows an upgrade notice
That option needs The Plus Addons for Elementor Pro. See the table above.
An option I read about is missing
Some options hide others: Horizontal is hidden while On Hover is on, and the Expand & Collapse Button and Slider & Pagination are hidden while Horizontal is on.
