The Repeater Accordion widget for Elementor is a powerful solution for showcasing dynamic content in an interactive format. Fully compatible with ACF, JetEngine, Meta Box, and Toolset, it effortlessly converts repeater fields into engaging accordions. Ideal for FAQs, structured data, or feature lists, this widget offers extensive customization, including icons, animations, and styling options. Whether you’re enhancing navigation or simplifying complex information, it provides the flexibility you need to create a seamless user experience.
Let’s look at each of the options in the Repeater Accordion widget for Elementor below.
Add a Repeater Accordion Widget to Elementor
This widget requires Unlimited Elements Pro version installed and activated on your WordPress website.
- Go to Unlimited Elements Widget Library
- Search in the search bar for “Repeater Accordion”
- Hover over the widget in the search results and click install
- Add the “Repeater Accordion” widget to any Elementor Page
Repeater Settings
Repeater Source
You can select the repeater source from below options.
- Meta Fields: Use meta fields from the current post or a custom post type as the source.
- JSON / CSV: Import data from uploaded JSON or CSV files.
- Google Sheets: Connects to a Google Sheets file as the data source.
Meta Field Name
Specify the name of the meta field that contains the repeater data.
Meta Field Location
- Current Post: Use this option to fetch meta field data from the currently displayed post.
- Parent Post: Select this option to fetch meta field data from the parent post of the current post.
- Select Post: Choose this option to manually select a specific post as the source of meta field data.
- Current Term: Use this option to fetch meta field data from the currently displayed taxonomy term.
- Parent Term: Select this option to fetch meta field data from the parent taxonomy term of the current term.
- Current User: Use this option to fetch meta field data from the currently logged-in user.
Show Debug Data
Toggle this option to display raw data for testing and debugging purposes.
Show Debug Meta
Toggle this option to display meta information for debugging purposes.
Title Field Name
Type text for title field.
Content Field Name
Type text for content field.
Image Field Name
Specify the field name for image.
Button Link Field Name
Specify the field name for the button link URL.
General Settings
First Appearance
Define the initial state of the items:
- First Opened - Keep the first item open when loaded.
- All Closed - Keep all items closed when loaded.
- All Opened - Keep all items open when loaded.
Close Item When Other Opens
Enable or disable closing an item when another item is opened.
Scroll To Head
Enable automatic scrolling when an item is opened:
- Off - Disable scrolling.
- Desktop - Enable scrolling on desktop devices.
- Mobile - Enable scrolling on mobile devices.
- Desktop + Mobile - Enable scrolling on both desktop and mobile devices.
Layout Setting
Heading HTML Tag
Set the HTML tag for the heading element.
- div
- h2
- h3
- h4
- h5
- h6
Show Title In Content
Enable or disable displaying the title within the content.
Heading HTML Tag
Set the HTML tag for the title inside the content.
- div
- h2
- h3
- h4
- h5
- h6
Show Image
Enable or disable displaying an image.
Show Content
Show or hide the content.
Show Button
Enable or disable displaying a button.
Button Text
Define the text displayed on the button.
Open Item Icon
Set the icon displayed when an item is closed.
Close Item Icon
Set the icon displayed when an item is collapsed
Connected Widgets Settings
Connected Widgets Settings let you create dynamic, interactive layouts with advanced features. Use remote control widgets for creative layouts or sync item-based widgets together for smooth integration.
Enable Remote Connection
Use remote control widgets to create advanced creative layouts.
Widget Name for Connection
This name will be used to connect and controls this widget by other widgets.
Sync
You can connect two item-based widgets and sync them.
Sync Group
Choose the same group for two or more item-based widgets so they can sync together.
Entrance Sequence Animation Settings
Entrance Sequence Animation
Define the animation effect applied when an item enters the viewport:
- None
- Appear
- Scale Down
- Scale Up
- From Left
- From Right
- From Top
- From Bottom
Animation Distance
Define the distance the item moves during the entrance animation.
- Shortest
- Short
- Medium
- Long
- Longest
Animation Duration
Set the time in seconds for the animation to complete.
Animation Step
Set the delay between consecutive item animations.
Animate Items Order
Define the sequence in which items animate.
- First To Last
- Last To First
Add Blur
Apply a blur effect during the animation.
- No Blur
- Small
- Medium
- Strong
Repeater Accordion Widget Styling
You can customize every aspect of the widget’s design, including colors, text, icons, fonts, and layout, to perfectly match your website’s style.
Item Styling
Set the item background, border, margin, radius, and background.
Icon Styling
You can set the icon placement, background, size, radius, and color.
Heading Styling
Set the heading background color, border radius, padding, and margin.
Heading Text Styling
You can set the padding, color, and typography of heading text.
Content Styling
Set the content text alignment, padding, margin, background, border and radius.
Title Styling
Here, you can set the color, typography and spacing of title element.
Text Styling
Set the text color, typography, and spacing.
Button Styling
You can set the typography, padding, radius, background, text color, and spacing of button.
Image Styling
Set the image height, radius, margin and border.
Repeater Accordion Design Examples For Elementor
Here are some live use cases for the Repeater Accordion Widget.
Repeater accordion with city information.
Team member details as repeater accordion.
We hope this guide has helped you explore the full potential of the Repeater Accordion Widget. With its deep integration with popular dynamic content plugins and extensive customization options, you can build accordions that enhance both functionality and design. If you need further assistance or have any questions, check out our documentation or reach out to our support team. Happy designing!