V4 Elements Accordion Estimated reading: 5 minutes 5 views Show questions and answers that open and close with a click. Great for FAQs, details and long lists. No code needed. WIDGET Accordion PARTS Items with a title and content PLAN Free BEFORE YOU START Requirement ELEMENTOR V4 Atomic ANIMATION ADDONS Free Tip: Install and activate Animation Addons before you start. Note: In the screenshots, the orange boxes and numbers show you where to click or what to check. STEP 1 Enable the Widget The Accordion is on by default. If it is off, turn it on from your dashboard. You only need to do this once. From your WordPress Dashboard, go to Animation Addon > Widgets. Open the Elementor V4 (Atomic) tab. Under General Widgets, turn on Accordion. Click Save Settings. The Accordion widget in the dashboard (click to zoom) STEP 2 Add the Accordion Add the widget to your page. It comes with three items. Open your page with the Elementor Editor. Click the + button at the top to open the Elements panel. Under AAE General, find Accordion. Drag it onto your page. The Accordion in the Elements panel (click to zoom) STEP 3 Pick a Look with a Preset A preset gives your accordion a ready-made design in one click. You can skip this step and style it yourself. Select the Accordion. In the General tab, open Presets. Click Apply a preset. Click the design you like. The Apply a preset button (1) and Reset to Default (2) (click to zoom) The four presets (click to zoom) Note: A preset replaces your items with sample questions. Pick a preset first, then write your own text. Tip: Click Reset to Default to go back to the plain look. Filled Card – Plus & Minus Each item is a grey card with a plus and a minus icon. Minimal Divider – Arrow Items split by thin lines, with an arrow icon. Minimal Divider – Plus & Minus Items split by thin lines, with a plus and a minus icon. Outlined Card – No Icon Each item has an outline and no icon. STEP 4 Add and Edit Items Each question and answer is an item. Manage them in the Items section. Open the Items section in the General tab. Click the + button to add an item. Drag an item by its dots to change the order. Click the copy icon to duplicate an item. Click the x to delete it. Click an item to open it. Type its title in Item name. Add (1), the items (2), copy and delete (3) (click to zoom) Type the title in Item name (click to zoom) STEP 5 Write the Answer Each item has a Header and a Content area. The content is what opens and closes. Open the Structure panel. Open an item. You see Header and Content. Click Content Text, then type your answer in Paragraph. To change the title, click Header Title. The Header (1) and the Content (2) (click to zoom) Tip: You can also drop other things into the Content area, like an image, a button or another widget. STEP 6 Set How It Opens Choose which item is open at the start, and whether many can be open at once. Select the Accordion. In the General tab, open Behavior. Choose Default State: First Open or All Closed. Choose Max Items Expanded: One or Multiple. Click Update to save your page. Default State (1), Max Items Expanded (2) and FAQ Schema (3) (click to zoom) STEP 7 Open One Item by Default Want a different item open at the start? Set it on the item. Select the item. Click it in the Structure panel. In Item Settings, turn on Active by Default. Active by Default (1) (click to zoom) SETTINGS Options Default State Default: First OpenFirst Open opens the first item at the start. All Closed closes them all. Max Items Expanded Default: OneOne closes the open item when you open another. Multiple lets many stay open. FAQ Schema Default: OffAdds FAQ data for search engines. It uses the item titles and answers. Active by Default Default: OffOn an item. Opens this item at the start. RESULT Final Result Two accordions on a live page. Each one uses a different preset and a different behavior. One at a time Preset is Filled Card – Plus & Minus. Default State is First Open and Max Items Expanded is One. When you open an item, the open one closes. Opening an item closes the one that was open Many open at once Preset is Minimal Divider – Plus & Minus. Default State is All Closed and Max Items Expanded is Multiple. Items stay open until you close them. Items stay open, so you can open as many as you like GOOD TO KNOW More Details Style it your way Select the Accordion, an item, or a part in the Structure panel, then use its Style tab. Items are 10px apart by default. Icons The plus, minus or arrow icons are separate parts called Open Icon and Close Icon. Select one to change it. FAQ Schema Turn it on only if the accordion holds real questions and answers, like a FAQ. HELP Troubleshooting I do not see the Accordion in the Elements panel Go to Animation Addon > Widgets > Elementor V4 (Atomic) and turn on Accordion. Click Save Settings, then reload the editor. Look under AAE General, or use the search box. My items changed after I picked a preset A preset replaces the items with sample text. Click Reset to Default, or write your own text again. I want all items closed at the start Open Behavior and set Default State to All Closed. Also check that no item has Active by Default turned on. I want to open more than one item Open Behavior and set Max Items Expanded to Multiple. I can not find where to write the answer Open the Structure panel, open the item, then click Content Text. You Did It Your page now has an accordion that opens and closes. If you face any problem, please contact our support team. We are happy to help.
