The accordion widget organizes content into expandable sections so visitors can click a title to reveal the answer below it. It is commonly used for FAQ sections, feature comparison lists, and product help pages.
The Accordion widget in The Plus Addons for Elementor supports multiple content sources, interactive behaviors like hover-open and horizontal layout, built-in FAQ schema markup for search engine rich snippets, and real-time search within accordion items. A similar content-organization widget is also available in Nexter Blocks for the WordPress block editor (Gutenberg).
Best Used For:
- FAQ pages on service, SaaS, and e-commerce websites
- Help documentation pages where users need to scan multiple topics
- Landing pages with feature breakdowns, pricing questions, or structured support content
Required Setup
- Elementor FREE Plugin installed & activated.
- You need to have The Plus Addons for Elementor plugin installed and activated.
- Make sure the Accordion widget is activated. To verify this, visit The Plus Addons → Widgets → and search for Accordion and activate.
- This is a Freemium widget to unlock the extra features; you need the PRO version of The Plus Addons for Elementor.
Learn via Video Tutorial
How to Activate the Accordion Widget?
Go to
- The Plus Addons → Widgets
- Search the widget name and turn on the toggle.
Key Features
- Multiple content sources – Choose between Content (Free) to add plain text or shortcode output, or Page Template (Pro) to display a pre-built Elementor template inside each accordion item. Use Page Template when you need to embed a gallery, WooCommerce product listing, or any complex layout inside an accordion panel.
- Standard toggle icons (Free) – Add expand and collapse icons for all accordion items at once. Control icon alignment and choose from FontAwesome, FontAwesome 5, or Icons Mind libraries.
- Different HTML tag options for accordion heading (Free) – Set the heading level (H1, H2, H3, etc.) for each accordion title. Use H3 for FAQ accordions nested inside a page that already uses H2 headings, so the heading structure stays correct for SEO.
- Individual icons for each accordion item (Pro) – Assign a unique icon to each item independently. Enable the Show Icon toggle inside the accordion item content settings and choose an icon from the available libraries.
- Unique ID (Pro) – Add an anchor link to individual accordion items so you can link directly to a specific panel from another page or section. See Anchor Link to a Specific Accordion Item for setup steps.
- Active Tab (Pro) – Set which accordion item opens by default on page load, or set all items to closed. Use this when your most important answer should be immediately visible, or when you want a fully collapsed starting state. See Active Tab for setup steps.
- On Hover Accordion (Pro) – Opens accordion items when the user hovers over the title instead of clicking. This is useful on desktop when you want a faster interaction. See On Hover Accordion for setup steps.
- Horizontal Accordion (Pro) – Converts the standard vertical layout to a side-by-side horizontal arrangement. Use this when you have a limited number of items and want a tab-style layout. See Horizontal Accordion for setup steps.
- Expand & Collapse Button (Pro) – Adds a button that opens or closes all accordion items at once. Use this when your accordion has more than 5 items and users may want to scan all answers without clicking each one. See Expand and Collapse Button for setup steps.
- Scroll Top (Pro) – Scrolls the active accordion item to the top of the viewport when it opens. Use this when accordion items contain long text and you want the content visible from the start without the user scrolling up manually.
- Stagger Animation (Pro) – Displays each accordion item one by one with a delay as the page loads. Use this when the accordion is part of an animated content section. See Stagger Animation for setup steps.
- Search (Pro) – Adds a real-time text search bar that filters accordion items by keyword. Use this when you have more than 10 items and users need to locate specific answers quickly. See Search Bar for setup steps.
- Slider & Pagination (Pro) – Splits a long accordion list into paginated sections or a slider. Use this when you have a large number of items and want to keep the page layout compact. See Slider and Pagination for setup steps.
- Autoplay (Pro) – Cycles through accordion items automatically at a set interval. Use this when you want to display content highlights in a self-running format without user interaction. See Autoplay for setup steps.
- SEO Schema Markup (Pro) – Outputs FAQ schema markup with your accordion content so search engines can display questions and answers as rich snippets in search results. Use this when your accordion contains questions and answers and you want to improve visibility in Google featured results. See SEO Schema Markup for setup steps.
- Carousel Connection ID (Pro) – Links the accordion to a Carousel Anything widget using a shared ID so both components advance together when the user interacts with either one. Use this when you want a carousel and accordion to stay in sync on the same page. See Carousel Connection ID for setup steps.
How to Add Content in the Accordion Widget?
To add content to an accordion item, click the item you want to edit.
Content
In the Title field, add the heading for the accordion tab. This text appears as the clickable label the visitor sees before expanding the item.
From the Type dropdown, select the content type for each accordion item. There are two options:
- Content – Adds plain text directly in the editor, or use a shortcode to display dynamic content. Use this for standard FAQ answers or text explanations.
- Page Template (Pro) – Selects a pre-created Elementor template from the dropdown. The content displays only if a template has been created beforehand. Use this when you need to embed a gallery, WooCommerce product listing, or any complex layout inside an accordion panel.
The Page Template option supports any content type you have designed in the Elementor editor, including galleries, carousels, WooCommerce products, and blog post listings.
Enable the Backend Visibility toggle to prevent the template from loading in the backend, which speeds up the editing experience. Toggle it on when you need to preview the content, and off again when you are done to keep the editor responsive.
Enable the Show Icon toggle to add a secondary icon inside the accordion title. This icon is independent from the standard open/close icon and can be different for each item. Choose from multiple icon libraries and set a custom color for each.
The Unique ID field assigns an anchor link to an individual accordion item. This lets you link directly to a specific panel from another page or section. For full setup steps, see Anchor Link to a Specific Accordion Item.
Add more accordion items by clicking the +Add Item button.
If you are building a content-heavy page and want a tabbed layout alongside your accordion, the Tabs Tours widget in The Plus Addons for Elementor organizes content in a horizontal tab format and works well on the same page as an accordion section.
How to Change the Accordion Icon?
Toggle Icon
To change the standard icons for all accordion items, go to the Toggle Icon tab.
Enable the Show Icon toggle to activate alignment and icon controls for the open and closed states of all accordion items.
From the Alignment field, set the icon position to the beginning or end of the accordion title text. Use the end alignment when accordion titles are long, so the icon does not crowd the beginning of the text.
From the Icon Font dropdown, choose the icon library to apply across all accordion items:
- FontAwesome – To add classic icons from the FontAwesome icon library.
- FontAwesome 5 – To add modern icons from the FontAwesome 5 collection.
- Icons Mind – To add clean and minimal icons from the Icons Mind library.
From the Title Tag dropdown, choose the heading level (H1, H2, H3, etc.) for the accordion title. Set this to H3 when the accordion is placed inside a section that already uses H2 headings, so the page heading hierarchy stays consistent for SEO.
If you are deciding between an accordion and a toggle widget for your layout, see Elementor Accordion vs Toggle for a comparison of when to use each.
Special Option
These special options add advanced interactive behaviors to the Accordion widget. Each has a dedicated doc for in-depth setup.
- On Hover Accordion
- Horizontal Accordion
- Autoplay
- Expand & Collapse Button
- Search Bar
- Slider & Pagination
Extra Option
The Extra Option tab controls Active Tab, Scroll Top, Stagger Animation, SEO Schema Markup, and Carousel Connection ID. Each has a dedicated setup doc:
How to Style Your Accordion Content?
Under the Style tab, go through each section to control the visual appearance of the accordion.
Icon – Controls the alignment, color, size, and gap of the standard open/close icons across all accordion items. Increase the icon size when accordion titles use large typography so the icon stays proportionate.
Title – Controls the typography and color of the accordion title text. Use this to match your accordion titles to the heading style of the rest of your page.
The Title section also includes styling for the secondary title icon: size, background, and box shadow. These controls are available when the Show Icon toggle is enabled in the content settings.
Title Background – Controls the background of the title area. Set inner padding and background color here. Use a distinct background color to make each accordion title stand out as a separate clickable bar.
Content – Controls the typography of the text inside the expanded accordion panel.
Content Background – Controls the background of the content area. Set margin, padding, and background color here. Use a slightly different background from the title to visually separate the question from the answer.
Autoplay – This section appears only when Autoplay is enabled in the Content tab. Controls the appearance of the autoplay progress indicator.
Search Text Highlight – Controls the typography, color, and background of highlighted text matching the search term, in both normal and hover states. This section is active only when the Search option is enabled.
Use the Box Border option to add a border around the accordion title. Control border style, color, radius, and width here. Use this when you want a card-style accordion with visible boundary lines separating each item.
You can manage the spacing between accordion items from here as well.
You can also add a border to the accordion content area using the Box Border option in the content styling section.
Search Accordion – Controls the typography, color, and background of the search bar in normal and hover states. This section is active only when the Search option is enabled.
Slider/Pagination – This section appears only when Slider/Pagination is enabled in the Content tab. Controls the navigation style for slider or pagination controls.
Expand/Collapse Button – This section appears only when the Expand and Collapse Button is enabled in the Content tab. Controls the style of the expand and collapse button.
Hover – Provides two hover style presets for the accordion title. This adds a visual state change when the user moves the cursor over an accordion item.
On Scroll View Animation – A global extension available across all widgets in The Plus Addons for Elementor. This adds an entrance animation as the accordion scrolls into the viewport.
Learn more about On Scroll View Animation
Advanced options are common to all widgets in The Plus Addons for Elementor. You can explore all their options from the Advanced tab.
View Advanced tab documentation.
Unlock Advanced Accordion Features (Pro Only)
The following features are available in the Pro version of The Plus Addons for Elementor and are not included in the free plugin. Each feature below links to a dedicated setup doc.
On Hover Accordion
Accordion items open when the user hovers over the title, with no click required. This applies to desktop users. For setup steps, see On Hover Accordion.
Horizontal Accordion Layout
The accordion switches from vertical stacking to a horizontal arrangement with panels displayed side by side. Use this for menu-style, timeline, or tab-style layouts. For setup steps, see Horizontal Accordion.
Expand/Collapse All Button
A button is added that opens or closes all accordion items at once. Use this on FAQ pages with more than 5 items where users may want to scan all answers without clicking each one. For setup steps, see Expand and Collapse Button.
Scroll Top on Activation
When an accordion item opens, the page scrolls so that item appears at the top of the viewport. Use this when accordion items contain long content and you want the answer visible from the start. For setup steps, see Scroll Top.
Staggered Animation & Search
Stagger Animation displays each accordion item with a time delay on page load. The Search option adds a real-time text search bar that filters visible accordion items as the user types. For setup steps, see Stagger Animation and Search Bar.
Autoplay & Carousel Connection
Autoplay cycles through accordion items at a set interval without user interaction. The Carousel Connection ID links the accordion to a Carousel Anything widget using a shared ID so both advance together. For setup steps, see Autoplay.
SEO Schema Markup
FAQ schema markup is output with the accordion content so search engines can display questions and answers as rich snippets in search results. For setup steps and schema configuration options, see SEO Schema Markup.
Why Upgrade?
The Pro version of The Plus Addons for Elementor adds these accordion features on top of the free widget. No additional plugins or custom CSS are required to enable them.
