Elementor FAQ Accordion (Accordion / FAQ Widget)
Updated · MoxKit 1.4.4 · Download free on WordPress.org
The Elementor FAQ accordion widget lists questions that open to show their answers. It is built on native <details> and <summary> elements, so it works with the keyboard and screen readers out of the box.
- Widget name MoxKit Accordion / FAQ
- Panel category MoxKit Addons
- Settings 59+
- Requires Elementor 3.25+ (free)
- Price Free
Table of contents
What is the Elementor FAQ accordion?
Choose how items open (slide, fade, zoom, lift, drop, blur, flip) and how fast, whether several can be open at once, and style the title box for normal, hover and open states.
Like every MoxKit widget, the Accordion / FAQ has Content and Style tabs with responsive settings, typography, colors and box styling, and it keeps Elementor's Advanced tab. You can switch it off under MoxKit > Widgets if you do not use it; a disabled widget loads no files.
Key features
- Unlimited items with rich-text answers.
- Single or multiple open items; initially open item.
- Open/close animations: slide, fade, zoom, lift, drop, blur, flip, none; duration and easing.
- Icons: plus/minus, chevron, custom library icons or none; left or right; 11 hover animations.
- Title box Normal, Hover and Open tabs; item, title and content box styling.
How to add the Elementor FAQ accordion
Follow these steps to add the widget to a page. You need MoxKit Addons for Elementor installed and Elementor active.
- Open the page in Elementor (Pages > Edit with Elementor).
- In the widget panel, search for "Accordion / FAQ" or scroll to the MoxKit Addons category.
- Drag the Accordion / FAQ widget into a Container.
- Edit the Accordion items: a question and an answer each.
- Set the initially open item (0 keeps all closed).
- Pick an animation and an icon type.
- Click Update (or Publish) to save the page.
Elementor FAQ accordion settings: Content tab
The Content tab holds what the widget shows and how it behaves. It has 3 sections and about 12 settings. Settings marked per device can have a different value on desktop, tablet and mobile.
Accordion items
| Setting | Type | Options and notes |
|---|---|---|
| Items | List | Each item: Title, Content |
| Allow multiple open items | Toggle | On / Off |
| Initially open item (0 = all closed) | Number |
Open / Close Animation
| Setting | Type | Options and notes |
|---|---|---|
| Animation | Select | Slide, Slide + fade, Slide + zoom, Slide + rise up, Slide + drop down, Slide + blur, Slide + 3D unfold, None (instant) (default: Slide) |
| Duration (ms) | Slider | |
| Easing | Select | Smooth, Quick start, soft stop, Ease in-out, Spring (slight overshoot), Linear (default: Smooth) |
Icon
| Setting | Type | Options and notes |
|---|---|---|
| Icon type | Select | Plus / minus (animated), Chevron (animated), Icon library, None (default: Plus / minus (animated)) |
| Icon | Icon | |
| Icon when open (open) | Icon | Optional. Leave empty to rotate the icon above instead (set the angle under Style > Icon). |
| Position | Choice | Left, Right (default: Right) |
| Hover animation (hover) | Select | Plays when the title box is hovered or focused. None, Grow, Shrink, Rotate 90°, Spin 360°, Bounce, Wiggle, Pulse, Nudge sideways, Flip, Tada, Heartbeat (default: None) |
| Repeat while hovering (hover) | Toggle | On / Off |
Elementor FAQ accordion settings: Style tab
The Style tab controls the look of every part of the widget: 6 sections, about 47 settings. Elementor's own Advanced tab (margin, padding, motion effects, responsive visibility, custom CSS) is available as usual.
Title
| Setting | Type | Options and notes |
|---|---|---|
| Typography | Group | All the usual Elementor typography settings. |
| Bottom spacing per device | Slider |
Content
| Setting | Type | Options and notes |
|---|---|---|
| Typography | Group | All the usual Elementor typography settings. |
| Color | Color | |
| Bottom spacing per device | Slider |
Icon
| Setting | Type | Options and notes |
|---|---|---|
| Icon size per device | Slider | |
| Box size per device | Slider | |
| Line thickness per device | Slider | |
| Rotate when open per device | Slider | |
| Spacing from title per device | Slider | |
| Vertical alignment per device | Choice | Top, Middle, Bottom |
| Animation speed (ms) | Slider | |
| Color | Color | |
| Background | Color | |
| Border color | Color | |
| Color (hover) | Color | |
| Background (hover) | Color | |
| Border color (hover) | Color | |
| Color (open) | Color | |
| Background (open) | Color | |
| Border color (open) | Color | |
| Border width per device | Slider | |
| Border radius per device | Spacing | |
| Box shadow | Group | All the usual Elementor box shadow settings. |
Item box
| Setting | Type | Options and notes |
|---|---|---|
| Item gap per device | Slider | |
| Background | Group | All the usual Elementor background settings. |
| Border | Group | All the usual Elementor border settings. |
| Box shadow | Group | All the usual Elementor box shadow settings. |
| Padding per device | Spacing | |
| Border radius per device | Spacing |
Title box
| Setting | Type | Options and notes |
|---|---|---|
| Title color | Color | |
| Background | Group | All the usual Elementor background settings. |
| Border | Group | All the usual Elementor border settings. |
| Box shadow | Group | All the usual Elementor box shadow settings. |
| Background color (hover) | Color | |
| Border color (hover) | Color | |
| Box shadow (hover) | Group | All the usual Elementor box shadow settings. |
| Background color | Color | |
| Border color (open) | Color | |
| Padding per device | Spacing | |
| Border radius per device | Spacing | |
| Color transition (ms) | Slider |
Content box
| Setting | Type | Options and notes |
|---|---|---|
| Background | Group | All the usual Elementor background settings. |
| Border | Group | All the usual Elementor border settings. |
| Box shadow | Group | All the usual Elementor box shadow settings. |
| Padding per device | Spacing | |
| Border radius per device | Spacing |
Tips and best practices
- Write questions the way people search for them; it helps your FAQ appear in search results.
- Keep answers short and link to longer guides.
Accordion / FAQ FAQ
Is the accordion accessible?
Yes. It uses native details/summary elements that work with keyboards and screen readers.
Can several items be open?
Yes. Turn on Allow multiple open items.
Summary
The Elementor FAQ accordion in MoxKit is free, works with the free version of Elementor and loads its files only on pages that use it. Native details markup, slide, zoom, blur and 3D animations, plus/chevron or custom icons. Install MoxKit Addons for Elementor from WordPress.org, drag the Accordion / FAQ widget onto a page and start with the settings above.