How to use Elementor Accordion Widget

What Is the Elementor Accordion Widget?

The Elementor accordion widget lets you display text content in a collapsed, condensed format, saving space on your page while still presenting a large amount of information. Visitors see a list of clickable titles — when they click one, the content beneath it expands and they can read the full answer. When they click another title, the previous one collapses automatically. This widget is built right into Elementor free — you do not need Elementor Pro to use it. It works on any page or post, and it is fully responsive, so it looks great on mobile too. In my experience building over 1800 websites, the accordion is one of the first widgets I recommend to any client who needs to present a lot of information without overwhelming visitors. Common uses include: – FAQ sections (the most popular use by far) – Service breakdowns — listing what is included in each service package – Product feature lists – Pricing plan details – Step-by-step process explanations

Accordion vs Toggle Widget: What’s the Difference?

A lot of people get confused between the accordion and the toggle widget in Elementor, so let me clear this up quickly. With the accordion widget, only one item can be open at a time. When a visitor clicks to open a new item, the previously open item automatically collapses. Also, the very first accordion item is expanded by default when the page loads. With the toggle widget, all items start collapsed on page load, and visitors can open as many items as they want simultaneously — multiple items can be expanded at the same time. So which should you use? – Use the accordion when you want a cleaner, more guided experience — ideal for FAQs where one answer at a time is enough. – Use the toggle when you want visitors to compare multiple open items side by side. For most local business websites I build — salons, clinics, gyms, coaches — the accordion is the better choice. It keeps the page looking neat and prevents information overload.

How to Add the Accordion Widget in Elementor (Step by Step)

Adding the accordion widget is as straightforward as any other Elementor widget. Here is how to do it: – Step 1: Open the page you want to edit and click Edit with Elementor. – Step 2: In the left-hand Elementor widget panel, type “accordion” in the search bar. – Step 3: Drag and drop the Accordion widget onto your canvas where you want it to appear. – Step 4: By default, the widget appears with two placeholder accordion items — Accordion #1 and Accordion #2. These are just starting points; you will replace the content with your own. That is all it takes to place the widget. Now let’s set up the actual content inside it.

Customising the Content Tab: Adding Your Items

Once the accordion widget is on your canvas, you will see the settings panel on the left side. Click on any accordion item to expand it and edit its content. For each item, you can fill in: – Title: This is the clickable heading that the visitor sees. Keep it short and clear — for example, “How much does a consultation cost?” or “What areas do you serve?” – Content: This is the answer or body text that appears when the item is expanded. You can include text, links, and images. To add more accordion items, just click the Add Item button at the bottom of the accordion list. There is no limit to how many items you can add — though I recommend keeping it under 8-10 items for readability. A few other Content tab settings worth knowing: – Icon: You can choose the icon that appears next to each title to indicate it can be expanded. The default is a plus (+) icon. – Active Icon: This is the icon that shows when an item is already open — usually a minus (-) or an upward arrow. – Title HTML Tag: You can set whether the accordion title is an H2, H3, H4, or a plain DIV. For FAQ sections nested inside a page that already uses H2 headings, I recommend setting this to H3 to keep your heading structure correct for SEO.

Styling the Accordion: Fonts, Colours, and Icons

Click the Style tab in the left panel to access all the visual customisation options. The Elementor accordion widget gives you a good range of styling controls without needing any CSS. Here is what you can customise under the Style tab: – Title Typography: Change the font, size, weight, and line height of your accordion titles. – Title Colour: Set a normal colour and an active colour (the colour of the title when that item is open). – Title Background: Set a background colour for the title bar in both normal and active states. – Content Typography: Control the font and size of the text inside each open accordion panel. – Content Colour: Change the text colour of the body content. – Border: Add a border around each accordion item — useful for separating items visually. – Icon Colour and Size: Adjust the size and colour of the expand/collapse icons. – Spacing: Control the gap between accordion items. My personal tip here is to keep things simple. I usually set a light grey or white background on the title, a slightly bolder font weight, and a brand accent colour for the active state. Clean and professional — that is all most local business clients need.

How to Install a Free Plugin for Advanced Accordion Features

The built-in Elementor accordion is solid for basic use, but if you want more design options — things like gradient backgrounds, box shadow styles, preset layouts, and the ability to embed images or other widgets inside accordion panels — you will need a free add-on plugin. The one I use for this is Essential Addons for Elementor (free version from WordPress.org). Here is how to get it set up: – Step 1: From your WordPress dashboard, go to Plugins → Add New. – Step 2: Search for “Essential Addons for Elementor” and install and activate it. – Step 3: Once activated, go back to your Elementor editor and search for “Advanced Accordion” in the widget panel. – Step 4: Drag the Advanced Accordion widget onto your page just like any other widget. The advanced accordion widget from Essential Addons gives you a significantly more feature-rich experience. You can select from multiple presets, add media files and icons to individual items, and even use nested accordions. For clients who want their FAQ section to look more polished and on-brand, this is the approach I recommend. Important note: Only load the widgets you actually use. Most add-on plugins let you disable unused widgets in their settings, which keeps your site fast and clean.

Using the Accordion Widget for an FAQ Section (With SEO Schema)

One of the most powerful things about the Elementor accordion widget is the built-in FAQ Schema option. When you enable FAQ schema, you are giving search engines structured data that tells them your accordion contains questions and answers. This can help your FAQ content show up in rich results and People Also Ask boxes in Google — meaning more visibility without extra effort. Here is how to enable it: – Step 1: With the accordion widget selected, go to the Content tab. – Step 2: Scroll down to find the FAQ Schema toggle and turn it on. – Step 3: Make sure your accordion titles are written as actual questions (e.g., “Do you offer free consultations?”) and your content sections contain clear, direct answers. One important note: if you enable FAQ schema, make sure your page caching setting is set to Default or Inactive for that widget — Elementor requires this for the schema to work properly. Also worth knowing: Google has reduced how often it displays FAQ rich results in search, but the schema data is still read by various AI tools and other search systems, so it is still worth enabling. For every FAQ page I build for a local business client, I always enable this. It takes ten seconds and costs nothing.

Best Practices for Accordion on Local Business Websites

After building over 1800 websites — mostly for local businesses in the USA, UK, and Australia — here are the accordion best practices I share with every client: – Write titles as questions: Especially for FAQs. “Do you offer home visits?” works far better than “Home Visits.” Real questions match what people actually search for. – Keep answers concise: Two to four sentences per accordion item is ideal. If your answer is getting very long, consider linking to a dedicated page instead. – Don’t overload the accordion: Limit to 6-10 items maximum. More than that and visitors start to feel overwhelmed, which defeats the purpose. – Use the correct heading tag: Set your accordion titles to H3 if they sit below an H2 on your page. This keeps your heading hierarchy clean — which matters for both SEO and screen readers. – Match your brand: Customise the accordion colours and fonts to match your site. A widget that looks out of place tells visitors the site was rushed. – Test on mobile: Always preview your accordion on a phone before publishing. Elementor’s accordion is responsive by default, but make sure your title text does not overflow or wrap awkwardly on small screens.

Frequently Asked Questions

Is the Elementor accordion widget free?

Yes, the Elementor accordion widget is included in the free version of Elementor — you do not need Elementor Pro. You can drag and drop it onto any page or post without any extra cost. If you want more advanced styling options, you can add a free plugin like Essential Addons for Elementor.

What is the difference between accordion and toggle in Elementor?

With the accordion widget, only one item can be open at a time and the first item is expanded on page load by default. With the toggle widget, all items start collapsed and visitors can open multiple items simultaneously. For most FAQ sections, the accordion is the better choice.

How do I add an FAQ section using the Elementor accordion widget?

Drag the Accordion widget onto your page, then replace the default items with your questions (as titles) and answers (as content). Turn on the FAQ Schema toggle in the Content tab to help search engines understand it is structured FAQ data. Keep titles written as real questions for best results.

Can I put images or other widgets inside an Elementor accordion?

The standard Elementor accordion widget only supports text content. To embed images, buttons, icons, or other widgets inside accordion panels, you need to use a free add-on like Essential Addons for Elementor, which provides an Advanced Accordion widget that supports nested content types.

Does the Elementor accordion widget work on mobile?

Yes, the Elementor accordion widget is fully responsive and works well on mobile devices. It is actually even more useful on mobile because collapsing content saves screen space and reduces the need for long scrolling. Always preview your accordion on a phone screen before publishing.

How do I change the icon on the Elementor accordion widget?

In the Content tab of the accordion widget, you will find an Icon field and an Active Icon field. Click either to open the icon library and choose from hundreds of icons, or upload your own SVG. You can change both the expand icon (shown when the item is closed) and the collapse icon (shown when it is open).

Should I enable FAQ schema on my Elementor accordion?

Yes, it is worth enabling. The FAQ Schema option in the accordion’s Content tab tells search engines that your accordion contains structured question-and-answer data. This can help your content appear in People Also Ask sections and rich results. Make sure page caching is set to Default or Inactive when using this feature.

Final Thoughts

And there you have it — everything you need to know to use the Elementor accordion widget like a pro. From adding your first item to enabling FAQ schema and installing a free plugin for advanced styles, it really is one of the easiest and most useful widgets in the whole Elementor library. I use it on almost every local business site I build, and my clients love how clean and organised it makes their pages look. If you are more of a visual learner, make sure you watch my YouTube video tutorial where I walk through the whole setup on a live Elementor page — you can see exactly where every setting is and follow along step by step. The video link is right at the top of this page. If you have tried this yourself and hit a snag, drop your question in the comments below — I read every single one and do my best to help. And if you would rather have me set this up for you on your site, just head over to the Contact page and send me a message. I am based in Pune but I work with clients in the USA, UK, and Australia every single week.