Atomic Element · Free
Open the third question on load, slow the panels down for a premium feel, use your own plus and minus icons, and add FAQ schema with one switch. Free, on Elementor Free.
The short answer
The Elementor accordion widget from Animation Addons is a free Elementor 4 Atomic Element that shows content in collapsible items. Each item has a real heading title, separate open and close icons and an open content container. You choose which items start open, how many open at once, and the open speed.
| Plan | Free |
|---|---|
| Element type | Native Elementor 4 Atomic Element (composite container) |
| Works with | Elementor Free and Elementor Pro, Atomic Editor on |
| Child elements | Accordion Item > Header (Title heading, Open Icon, Close Icon) and Content (any atomic elements) |
| Behavior | Default State (First Open / All Closed), Max Items Expanded (One / Multiple), Animation Speed (ms) (default 400), Active by Default per item |
| SEO | FAQ Schema switch outputs FAQPage JSON-LD from item titles and answers; all answers are in the page HTML |
| Accessibility | Headers are buttons with aria-expanded; closed panels are removed from the Tab order; reduced-motion visitors get instant open and close |
| Animations | CSS open/close transition, no GSAP. Entrance motion with AAE Pro extensions |
| Plugin version | Animation Addons for Elementor 4.3 · Last updated October 2026 |
Demo variations
Ideas you can build today with the Accordion and native Elementor 4 elements. Cards marked Pro add an Animation Addons Pro extension or element; the rest work on the free plugin.
Five questions in a narrow centred column under the pricing table, separated by thin lines, plus icons on the right. The billing question is open on load because it's the one people ask most.
Each item opens into two columns: a short description and deliverables on the left, a project image and a "See the case study" button on the right. Several can stay open to compare.
Flat rows with a bottom border only, small chevrons instead of plus and minus, all closed until the shopper picks a section.
A dark panel of modules; the open module's header turns accent-coloured, and lesson rows inside list a title and a duration. Panels glide open slowly.
Topic rows ("Billing", "Account", "Integrations"); opening one reveals a smaller accordion of questions inside.
A warm cream card with "Breads", "Pastries" and "Cakes" as serif headers; each opens to a two-column list of items and prices with a small photo.
Features
Every option below is a real control in the Accordion panel or part of how the element renders. Nothing here needs custom code.
Default State opens the first item or none. Active by Default opens any specific item instead, so the question people ask most is already answered.
Max Items Expanded set to One closes other items when a new one opens; Multiple lets visitors compare.
Animation Speed (ms) sets how fast panels slide, from snappy to slow.
Open Icon and Close Icon are two SVG elements you swap independently: plus and minus, chevrons, or your own brand marks. Icons are hidden from screen readers because the button already announces its state.
Each title is an Elementor Heading set to H3 by default, so it sits under your section's H2. Change it to any level.
Content is an open container: images, buttons, grids, forms, even another accordion.
FAQ Schema adds FAQPage structured data built from your titles and answer text. No schema plugin or hand-written JSON.
Built on the atomic base
Why it mattersGive all titles one Class and every FAQ on the site changes together. Item Box, Header and Icon also have hover and selected styles, so the open item can stand out.
Step by step
Six steps, from installing the plugin to publishing the page. The bold names are the exact labels you will see in the Elementor 4 panel.
Download freeInstall Animation Addons for Elementor and open a page with the Atomic Editor on.
Drag Accordion from the Animation Addons atomic group onto the canvas. It drops in with three items.
Use Items to add, duplicate, reorder or rename items, and click a title on the canvas to edit it.
Under Behavior, set Default State, Max Items Expanded and Animation Speed (ms); turn on Active by Default on any item that should start open.
For an FAQ, turn on FAQ Schema under Accordion Settings.
Style the parts, check the selected state, preview on mobile and publish.
Honest comparison
Elementor 4.3 added its own Atomic Accordion, and it covers the basics well: first-open or all-closed, one or multiple open, nested accordions and FAQ schema. Choose Animation Addons when you need per-item control.
| Feature | Elementor Atomic Accordion | Animation Addons Accordion |
|---|---|---|
| Native Atomic Element | Yes | Yes |
| Start state | First expanded or all collapsed | First Open or All Closed, plus Active by Default on any item |
| One or multiple open | Yes | Yes |
| Nested accordions | Yes | Yes |
| FAQ schema | Yes | Yes |
| Open/close speed setting | Not in its settings | Animation Speed (ms) |
| Icon behaviour | One icon that rotates 180° on open (rotation cannot be turned off) | Separate Open Icon and Close Icon you swap freely |
Compared with Elementor 4.3.3 (September 2026).
Who it's for
The people who get the most out of it, and what they use it for.
Shipping FAQs and service lists that match each client's design system.
Answering pricing questions with FAQ schema.
Tucking curricula and specifications into tidy sections.
FAQ
Add the free Animation Addons for Elementor Accordion to your page and turn on FAQ Schema under Accordion Settings. The Accordion then outputs FAQPage structured data built from each item's title and answer text. You do not need a separate schema plugin or hand-written JSON-LD, and answers stay in the page HTML.
Select the Animation Addons Accordion and set Default State to All Closed, then select the item you want and turn on Active by Default. That item opens on page load while the rest stay closed. Set Default State to First Open if you simply want the first item open.
Yes. Each Animation Addons Accordion header holds an Open Icon and a Close Icon as separate SVG elements. Select either one and swap in your own SVG, such as chevrons or brand icons, then style size and colour, including the selected state. The icons are hidden from screen readers.
Yes. Each Animation Addons Accordion header is a real button that announces whether it is expanded and works with Enter and Space. Answers are labelled regions, closed panels are skipped by the Tab key and screen readers, and visitors who have reduced motion turned on get an instant open and close.
No. The Animation Addons Accordion renders every answer in the page HTML, including closed ones, so search engines and AI crawlers can read them. Closed panels are only collapsed visually. With FAQ Schema on, the same answers are also listed in FAQPage structured data.
The Animation Addons Accordion uses a CSS transition for opening and closing and loads no GSAP or other animation library. Its small script and stylesheet load only on pages where an Accordion is used. Heavy images inside answers still count, so size them for their display width.
No. The Animation Addons Accordion is a free Elementor 4 Atomic Element and works on Elementor Free with the Atomic Editor turned on. Animation Addons Pro is only needed if you add Pro extensions, such as Regular Animation, to animate items as they enter the screen.
More answers in the FAQ · Documentation · Free vs Pro
Pairs well with
Elements that work well with the Accordion on the same page or template.
Per-item open state, your own icons and FAQ schema, free on Elementor Free.
