Free Elementor Accordion Widget for FAQs and Toggles
Advanced Accordion is a Master Addons widget for FAQ sections and collapsible content, and it does not need Master Addons Pro. Choose Accordion to keep one item open at a time or Toggle to let visitors open several. Each item has a title and answer, can start open, and can use its own expand and collapse icons. Style titles for Normal, Hover and Active states, then style the answers and icons. Master Addons Pro adds saved sections, saved widgets and page templates as item content, which is also how you nest one accordion inside another.
How to Create an FAQ Accordion in Elementor
You need Elementor and the Master Addons plugin from WordPress.org.
- Check that Advanced Accordion is switched on under Master Addons, Widgets.
- In the Elementor editor, search for Advanced Accordion and drag it onto the page.
- Set Accordion Type to Accordion for a classic FAQ.
- Add one item per question, type the answer, and set your most asked question to Active as Default.
- Set Title HTML Tag to H3 so questions become headings.
- Style the titles, answers and icons in the Style tab.
About FAQ schema: this widget does not output FAQPage structured data. If you want FAQ rich results, turn on the FAQ Schema option in Elementor’s own Accordion widget, or add the questions with an SEO plugin FAQ block. Every setting is covered in the Advanced Accordion widget settings.
Advanced Accordion at a Glance
What the widget does, read from the Master Addons code.
| Item | Advanced Accordion widget |
|---|---|
| Modes | Accordion (one item open at a time) or Toggle (several open) |
| Items | As many as you add to the list |
| Open on load | Active as Default per item; with none set, all items start closed |
| Icons | Expand and collapse icons for the widget, plus custom icons per item |
| Title HTML tag | H1 to H6, div or span |
| Title styling | Normal, Hover and Active: background, text color, typography, border, radius, shadow, padding |
| Content | Text and media; saved section, widget or page template with Pro |
| Per-item background color | With Pro |
| Nesting | Through a saved section or template with Pro |
| Animation speed | Toggle Speed in milliseconds |
| FAQ schema | No |
| Max items expanded setting | No; use Accordion mode for one at a time |
| Needs | Elementor and Master Addons |
Accordion or Toggle Behavior
Accordion Type sets the behavior: Accordion closes the open item when another opens, and Toggle lets several stay open. For each item, add the Title and Content, turn on Active as Default to open it on load, and turn on Enable Custom Icon for its own icons. Content Type is plain content without Pro. Saved Section, Saved Widget and Saved Page Template, plus a per-item background color, need Pro.
- Toggle Speed in milliseconds for the open and close animation.
- Title HTML Tag from H1 to H6, div or span, so questions can be real headings.
- Nested accordions: save an accordion as a template and load it in an item with Pro.
Keep an Elementor Accordion Closed by Default
Every item in Advanced Accordion starts closed unless you switch on Active as Default for it. For an accordion that is fully closed when the page loads, leave that switch off on every item. To open only the first item, turn it on for item one and leave the rest off.
In Accordion mode one item stays open at a time, so a second click on another title closes the first. In Toggle mode visitors can open as many items as they like, and every item you set with Active as Default opens together on load. Elementor’s own Accordion handles this with two widget settings instead: a default state (first item expanded or all collapsed) and a maximum number of expanded items.
No item has Active as Default switched on, so all four answers start closed.
Toggle type with two items set to Active as Default: both open together on load.
Accordion, Toggle or Toggle Content?
Three of our widgets open and close content. Pick by what the visitor needs to see at once.
| You want | Use |
|---|---|
| An FAQ list where one answer is open at a time | Advanced Accordion, Accordion type |
| A spec list or checklist where visitors open several items | Advanced Accordion, Toggle type |
| One switch that swaps a whole section, such as monthly and yearly prices | Toggle Content |
| Labels side by side with one panel showing | Tabs |
For the longer comparisons, read toggle vs accordion in Elementor and tabs vs accordion.
State-Based Title Styling & Structure
The title bar is what users click – make every visual state intentional. Style the Title separately for its Normal, Hover, and Active (open) states. For each state, define a unique Background Type (color, gradient), Text Color, and Typography. Control the Title Align, Padding, Border, Border Radius, and add a Box Shadow. This level of detail lets you create a clear visual journey: a neutral default, an inviting hover, and a distinct “open” state that confirms the user’s action.
- Triple-State Design: Apply distinct styles to Normal, Hover, and Active title bars.
- Advanced Backgrounds: Use solid colors or gradients for different states to create depth.
- Full Box Control: Adjust Padding, Borders, and Box Shadow to make each title bar a designed component.
Customizable Toggle Icons with Dual States
Move beyond the generic triangle icon. Enable Custom Icon to choose any icon from the library for both the Expand (closed state) and Collapse (open state) actions. Position the icon to the Left or Right. Then, style these icons independently for Normal, Hover, and Active states, changing their Color, Size, and Background. Adjust Icon Spacing and Padding around the icon for perfect alignment. This turns a functional indicator into a cohesive part of your design language.
- Dual Icons: Set different icons for the “plus” (expand) and “minus” (collapse) states.
- State-Specific Icon Styling: Change the icon’s color and background when the item is hovered or active.
- Alignment properly: Control icon Alignment, Position, and Spacing relative to the title text.
Content Area & Container Styling
The content that slides down deserves its own design consideration. Style the Content area with its own Background Color, Text Color, Typography, and internal Padding. Add a Text Shadow for readability if needed. Then, style the overall Items container that holds all the accordion sections: set the Spacing between items, a global Border, Border Radius, and Box Shadow. This ensures the entire widget feels like a unified, polished component, and the opened content is easy and pleasant to read.
- Content Area Design: Style the background and text of the drop-down content for optimal readability.
- Container-Level Polish: Apply Border Radius and Box Shadow to the entire accordion group.
- Item Spacing: Control the Spacing (margin) between each accordion item for a clean, separated look.
Elementor Accordion vs Master Addons Advanced Accordion
Free Elementor now has its own Accordion widget. Here is how the two compare, so you can pick the right one.
| Feature | Elementor Accordion | Master Addons Advanced Accordion |
|---|---|---|
| Price | Free in Elementor | Included without Pro; template content needs Pro |
| FAQ schema | FAQ Schema option | No schema output |
| Nested content | Drop any widgets into each item, including another accordion | Text without Pro; saved sections, widgets or templates with Pro |
| Open behavior | Default state and max items expanded | Accordion or Toggle, plus Active as Default per item |
| Per-item icons | Shared icons | Custom expand and collapse icons per item |
| Title styling | Normal, Hover and Active | Normal, Hover and Active with background, border and shadow |
Choose Elementor’s Accordion when you need FAQ schema or widgets inside every item without an addon. Choose Advanced Accordion for per-item icons and Toggle behavior with detailed styling. Related widgets: Toggle Content, Tabs, Table of Contents, Info Box and Business Hours.
FAQ Schema and Advanced Accordion
FAQ schema is structured data that marks a block of questions and answers as an FAQ. Advanced Accordion does not output it. The questions still show on the page and stay crawlable; the widget just adds no FAQPage markup.
Google stopped showing FAQ rich results in Search on 7 May 2026, so the markup no longer adds the question dropdown under a search result. Some other tools may still read it. If you want it anyway, use Elementor’s Accordion widget and switch on its FAQ Schema option, or keep Advanced Accordion for the design and add the FAQ schema through your SEO plugin. Pick one source of FAQ markup per page, because two FAQPage blocks for the same questions confuse more than they help.
Advanced Accordion Examples
Fourteen live demos built with Advanced Accordion: FAQ pages, support panels, pre-sale questions, step lists and a plan table.
Frequently Asked Questions For Advanced Accordion
What’s the practical difference between “Accordion” and “Toggle” type?
Accordion: Only one item can be open at a time. Opening a new item automatically closes the previous one. Best for FAQ pages or sequential instructions where you want to minimize scrolling and focus attention.
Toggle: Multiple items can be open simultaneously. Users can expand several items to compare or gather information. Best for feature checklists, product specification lists, or content where users need to see multiple sections at once.
Do I need Master Addons Pro for Advanced Accordion?
No. Accordion and Toggle types, Active as Default, custom icons and all the styling work without Pro. Saved section, widget and template content and per-item background colors need Master Addons Pro.
What are Saved Section and Saved Page Template content types?
They are Master Addons Pro options that load something from your Elementor template library into an item, such as a contact form section or another accordion. That is how you build nested accordions with this widget.
How do I keep all accordion items closed on page load?
Leave Active as Default off on every item. Advanced Accordion opens only the items where that switch is on, so with none set, every item starts closed and the visitor opens the one they need.
Why is my accordion not opening?
Check that Advanced Accordion is switched on under Master Addons, Widgets, then clear your cache. If a speed plugin delays JavaScript until the first scroll or tap, items will not open until that delay ends, so exclude the Master Addons scripts from it.
Does the accordion add FAQ schema?
No. Advanced Accordion does not output FAQPage structured data. Google no longer shows FAQ rich results (since May 2026), so the markup matters less than it used to. If you still want it, use Elementor’s Accordion widget with its FAQ Schema option, or add it through an SEO plugin.
Can I control the opening and closing animation speed?
Yes. In the Content tab, you’ll find Toggle Speed (ms). The value is in milliseconds (e.g., 300). A lower number (like 200) makes it faster and snappier; a higher number (like 500) makes it slower and more deliberate.
How do I make one item open by default?
Open the item in the Content tab and turn on Active as Default. With the Accordion type, set it on one item only: if two items have it on, both open on load, and the first click closes everything except the item clicked.
Can I put an accordion inside another accordion?
Yes, with Master Addons Pro: save the inner accordion as a section or template, then pick it as the Content Type of an item. Free Elementor’s Nested Accordion widget also nests accordions without an addon.
Can I make a horizontal accordion?
No. Advanced Accordion stacks items vertically and opens each answer below its title. For side-by-side labels, the Tabs widget is the closer fit.
Trending Elementor Widgets & Extensions
Build sophisticated websites in less time.
Glassmorphism
Container Extras
Patterns
![Master Addons Post/Page Duplicator extension for Elementor: MA Duplicator row link in the WordPress Pages list creating a Landing Page - [Duplicated #128] draft](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/15102930/post-page-duplicator-768x403.webp)
Post/Page Duplicator
