Advanced Accordion

Advanced Accordion Widget #

The Advanced Accordion widget allows you to create collapsible content sections with smooth animations and flexible content types. Perfect for FAQs, product details, service descriptions, or any content that needs to be organized in an expandable format with professional styling and interactive features.

Live Demo: https://turbo-addons.com/advanced-accordion/

How to Use the Advanced Accordion Widget #

Step 1: Add the Widget

1. Open a page in the Elementor Editor.
2. Search for Advanced Accordion.
3. Drag and drop the widget into your desired section.

Step 2: Configure Accordion Items

Go to Content tab → Accordion Items.

Add Accordion Items

• Click Add Item to create new accordion sections.
• Reorder items using drag & drop functionality.
• Remove items easily when not needed.

For Each Item:

Title

• Enter the accordion section title (e.g., “What is your return policy?”).
• This appears as the clickable header for each section.

Content Type
Choose from three content options:

• Text (WYSIWYG) – Rich text editor with formatting options.
• Shortcode – Insert WordPress shortcodes for dynamic content.
• Insert Template – Use saved Elementor templates for complex layouts.

Content Configuration

• Text Content – Add formatted text, links, images, and media (when Text type selected).
• Shortcode – Enter shortcode syntax like 

  Error: Contact form not found.

   (when Shortcode type selected).
• Choose Template – Select from your saved Elementor templates (when Template type selected).

Open by Default

• Enable to have specific accordion items open when page loads.
• Useful for highlighting important information.

Step 3: Configure Layout Settings

Title Alignment
Choose how titles are positioned:

• Start – Align title to the left.
• Center – Center the title.
• End – Align title to the right.
• Space Between – Title on left, icon on right (default).
• Space Evenly – Distribute space evenly.

Icon Position

• Start – Place icon before the title text.
• End – Place icon after the title text (default).

Animation Speed

• Control how fast accordion sections open/close (0.1s – 5s).
• Default is 0.3 seconds for smooth transitions.

Step 4: Configure Accordion Icons

Go to Content tab → Accordion Icons.

Closed Icon

• Select icon displayed when accordion section is closed.
• Default is plus icon (eicon-plus).

Open Icon

• Select icon displayed when accordion section is open.
• Default is close icon (eicon-editor-close).

Step 5: Style the Container

Go to Style tab → Box.

Width

• Set accordion container width in pixels, em, or percentage.
• Default is 100% for full container width.

Step 6: Style Accordion Items

Go to Style tab → Item.

Items Gap

• Control spacing between accordion items (default: 12px).

Padding

• Set internal spacing for accordion titles.

Border Radius

• Create rounded corners for accordion items.

State Styling

Configure different appearances for:

• Normal – Default appearance.
• Hover – When users hover over items.
• Active – When accordion sections are open.

Available Options for Each State:

• Background – Solid colors, gradients, or images.
• Border – Custom border styles and colors.
• Box Shadow – Add depth with shadow effects.

Step 7: Style Content Area

Go to Style tab → Content.

Padding

• Control internal spacing for accordion content (default: 16px all sides).

Background

• Set background color or gradient for content areas.

Step 8: Style Typography

Go to Style tab → Typography.

Normal State

Accordion Title

• Typography – Font family, size, weight, line height.
• Title Color – Set title text color.

Content

• Typography – Font settings for accordion content text.
• Text Color – Set content text color.

Hover State

• Title Color – Different color when hovering over titles.

Active State

• Title Color – Color when accordion section is open.

Step 9: Style Icons

Go to Style tab → Icon.

Icon Size

• Adjust icon dimensions (10-300px, default: 18px).

Icon Colors

• Normal – Default icon color.
• Hover – Icon color when hovering over titles.
• Active – Icon color when accordion section is open.

Step 10: Advanced Options

Use Elementor’s Advanced tab for:

• Margin & padding
• Responsive visibility
• Motion effects
• Custom CSS (optional)

Final Output #

The Advanced Accordion widget creates a professional, interactive content organizer with smooth animations, flexible content types, and complete styling control—perfect for FAQs, product information, and organized content presentation.

Tips for Better Results #

• Keep titles concise and descriptive for better user experience.
• Use consistent styling across all accordion items for professional appearance.
• Test animation speed to find the right balance between smooth and responsive.
• Consider mobile users – ensure touch targets are large enough.
• Use templates for complex content layouts within accordion sections.
• Group related content logically for better information architecture.
• Don’t overload single accordion sections with too much content.