The updated Accordion widget in Elementor allows you to embed nested elements inside each accordion panel. Unlike the older version, which supported only plain text or basic content, this advanced accordion supports full widget nesting—giving you the power to design flexible, interactive, and richly structured collapsible panels.
📌 Common Use Cases
Portfolios: Showcase service offerings, image galleries, or client details within collapsible sections
Testimonials: Combine profile images, ratings, and text reviews inside each panel
Restaurant Menus: Display dish descriptions, images, prices, and call-to-action buttons
Product Information: Present shipping policies, technical specs, return info, or FAQs inside each toggle section
🛠️ How to Use the Widget
Add the Accordion Widget to your layout
Each accordion item includes a container where you can insert any widget, such as images, buttons, or text editors
In the Content tab, you can:
Set section titles
Use heading tags (H2–H6)
Define toggle icons or remove them
Choose to expand the first panel or keep all collapsed
Enable single or multiple open sections
Adjust animation speed for transitions
In the Style tab, customize:
Spacing between accordion items
Distance between title and content
Typography, background, borders, padding, and radius for each state (normal, hover, active)
Icon alignment, size, and color
Container style for nested elements
Use the Advanced tab to apply padding, margin, motion effects, and other layout controls. (Note: CSS ID fields are found in the Content tab, not here.)
⚠️ Limitations and Notes
This widget replaces the older Accordion and Toggle widgets. Those are still usable but lack nested element support
Nested elements do not work inside loop-based widgets (e.g., Loop Grid, Loop Carousel)
Overusing complex nested structures can impact layout responsiveness and readability if not planned carefully
🧠 Final Takeaway
Elementor’s new Accordion widget with nested elements unlocks a powerful way to create interactive, content-rich collapsible sections. Whether you’re designing FAQs, menus, product info panels, or multi-level content structures, this widget gives you full creative control without requiring custom code or third-party plugins.
