How to use Advanced Accordion Widget of Sky Addons for Elementor

Advanced Accordion is the best and most powerful Widget for Elementor that creates an impressive accordion effect for your articles. It makes the accordion easy to customize. You can customize your Accordion with title, icon, menu, content, button etc. The Advanced Accordion Widget enhances your Elementor page-building experience by providing versatile and interactive accordion designs. You can build accordions from a simple repeater, pull them dynamically from posts, or map them to ACF repeater fields, arrange items in a multi-column grid, and even output FAQ Schema for SEO-friendly rich results. This documentation will guide you through the process of using the Advanced Accordion Widget to create engaging content sections on your website.

Features:

1. Multiple Content Sources: Build items with the default Repeater, pull them from Dynamic Posts, or map them to ACF repeater fields.
2. Grid Layout: Arrange accordion items across 1 to 4 columns with adjustable column gap.
3. Multiple Accordion Styles: Choose from various pre-designed styles to match your website’s theme.
4. Customizable Design: Adjust colors, fonts, borders, and more to fit your brand.
5. Icon Support: Add a title icon plus separate open/close (active) icons with control over alignment.
6. Collapsible or Expandable: Choose whether multiple sections can be open at once or only one at a time.
7. Smooth Animation: Engage users with smooth opening and closing transitions.
8. FAQ Schema: Output Schema.org FAQPage microdata for SEO-friendly FAQ rich results.
9. Advanced Content: You can also use Elementor Templates or AE Templates as content too.

Insert Advanced Accordion Widget

1. Open Elementor Editor. In the Elementor panel, search for “Advanced Accordion” under Sky Addons.
2. Drag and Drop the Widget to the desired location on your page / editor.

Choose a Content Type

In the Layout section, the Content Type option lets you decide where the accordion items come from:

1. Default (Repeater): Manually add each accordion item with its own title, icon, and content. Best for static FAQs and curated content.
2. Dynamic Posts: Generate accordion items automatically from your posts using the built-in Query builder. Each post becomes an item (post title as the accordion title, post content as the panel).
3. ACF Fields: Map an Advanced Custom Fields repeater to the accordion, so editors manage items through ACF instead of the widget.

You can also set Grid Columns (1–4) to arrange items in a multi-column layout, choose the Title HTML Tag for SEO/semantics, toggle Show Title Icon with Icon Alignment, and pick the closed and active (open) toggle Icons.

Configure Content (Repeater)

1. Click “Add Item” to create a new accordion tab.
2. Enter a title and content for each accordion section.
3. You can Choose an icon for each accordion item from the icon library.
4. You can also use Elementor Templates or AE Templates as content too.
5. Drag accordion items to rearrange their order.

Dynamic Posts (Query)

Set Content Type to Dynamic Posts to build the accordion automatically from your content. A dedicated Query section appears where you can control the source:

1. Select the post type and refine results by terms, authors, or other query parameters.
2. Set Posts Per Page to limit how many items are generated.
3. Each matching post becomes an accordion item — the post title is the trigger and the post content fills the panel.

ACF Fields

Set Content Type to ACF Fields to drive the accordion from an Advanced Custom Fields repeater. In the ACF Settings section, map your fields:

1. ACF Repeater Field: Enter the name of the ACF repeater field that holds your items.
2. Title Field Mapping: Enter the sub-field name used for each item’s title.
3. Content Field Mapping: Enter the sub-field name used for each item’s content.

Note: ACF mode requires the Advanced Custom Fields plugin to be active, with the repeater field attached to the current post.

Configure Settings

In the Settings section, you gain full control over the widget, unlocking powerful customizations options to enhance creativity and design flexibility.

1. Duration: Set how quickly the accordion items open and close.
2. Collapse: Add control buttons to expand or collapse all accordion sections at once.
3. Show Multiple: Decide if multiple accordion items can be open simultaneously or if only one can expand at a time. This feature enhances user experience by providing better content visibility and flexibility.
4. Open Item Default: This Accordion settings allows you to set a specific item to be expanded by default when the page loads. Accepts a single number or a comma-separated list (e.g. 1 or 1, 2, 3).
5. FAQ Schema (itemscope): Enable Schema.org FAQPage microdata so search engines can read your accordion as a Q&A and show FAQ rich results. Ideal for FAQ sections.

Style Your Accordion

Customize your accordion to match your design aesthetics effortlessly. Adjust colors, typography, spacing, icons, and more to create a visually appealing and engaging accordion that enhances user experience. Add smooth animations and interactive effects to make your content stand out!

1. Item Section:
   Fully customize the item container with options for spacing, column gap (for grid layouts), borders, background, and box-shadow to create a refined look.
2. Title:
   Style the title with advanced typography, text shadow, padding, colors, and box-shadow, offering customization for normal, hover, and active states.
3. Title Icon:
   Adjust the title icon’s size, spacing, padding, border, background, and box-shadow with unique styles for normal, hover, and active modes.
4. Icon:
   Personalize the open/close icon with complete control over size, spacing, padding, border, background, and color in different states.
5. Content:
   Control content alignment, text color, typography, background, padding, border, and box-shadow to ensure a seamless and visually appealing design.

These advanced styling options empower you to fully personalize the accordion widget, making it adaptable to any project while keeping it both functional and visually appealing.

Save and Preview

1. Once you’ve customized and styled your accordion, click “Publish” or “Update” to save your changes.
2. Preview the page to ensure the widget looks and functions as desired.

Best Practices

1. Consistency: Maintain a consistent style with the rest of your website for a cohesive look.
2. Accessibility: Ensure text within accordion sections is legible and buttons are easily navigable.
3. Use FAQ Schema for FAQs: Enable FAQ Schema on genuine question-and-answer content to improve search visibility.
4. Testing: Check functionality across different devices and screen sizes for a responsive design.

Troubleshooting

1. Accordion Not Expanding: Ensure JavaScript is enabled and there are no conflicting plugins.
2. No Items in Dynamic/ACF Mode: Verify the Query returns posts, or that the ACF repeater field name and sub-field mappings are correct and the field is attached to the current post.
3. Styling Issues: Double-check CSS settings and clear cache if recent changes aren’t displaying.

Conclusion

The Advanced Accordion Widget by Sky Addons for Elementor provides a dynamic way to showcase content. Utilize its customizable features to create a seamless user experience. For further assistance, consult the Sky Addons support team or community forums. Enjoy building engaging content sections!