Accordions are the finest approach for distributing long content without adding unnecessary page length. If you want to enhance the user experience on your page consider using an accordion widget on your Elementor website.
Install Content Accordion Widget for Elementor
This widget requires Unlimited Elements Free version installed and activated on your WordPress website.
- Go to Unlimited Elements Widget Library
- Search in the search bar for “Content Accordion”
- Hover over the widget in the search results and click install
- Add your “Content Accordion” widget to any Elementor Page
Determine how the accordion first shows up.
- First Item Open
- All Items Closed
- All Items Open
Close Item when Other Opens
Determine whether to enable automatic close of author items when a different item is triggered open.
Scroll to Head
Scroll to the top of the item heading.
- Desktop + Mobile
- Icon First
- Icon Last
Enable / Disable title inside of item content.
Enable / Disable content inside of item content.
Heading HTML Tag
Change the HTML tag for the heading. Used for SEO purposes.
Enable / Disable button inside of item content.
Choose an icon for a closed accordion-item (supports SVG upload)
Choose an icon for a open accordion-item (supports SVG upload)
Connected Widgets Settings
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.
You can connect two item-based widgets and sync them.
Choose the same group for two or more item-based widgets so they can sync together.
Jump to Item Link
There are two methods to create accordion triggers:
Method 1: Full Link HTML
With this option, you can create a go-to accordion-item link.
The link should be in this format:
This link will jump to the second item of the accordion named: “yourname”
Method 2: Link Custom Attributes
When using the link field inside of Elementor you can add custom attributes. Below is an example of the format you can paste inside of the custom attributes inside of any link field in Elementor:
Manage the items of the accordion using the repeater field.
- Add new items
- Duplicate items
- Delete items
- Reorder Items
- Edit Items
Set the heading for the accordion item.
- Text (Title, text, and button)
- Elementor Template
You can create multiple Elementor templates and insert each template to a different accordion item to achieve advanced layouts.
Title for content inside item.
Link for the button inside item content.
Text for the button inside item content.
Content Accordion Style
Different styling options are included to control every design aspect of the widget. Modify the colors to match your site’s look and feel. Customize the colors, typography, and layout to make the widget look and work exactly how you want it.
Style the item background, border, shadow, and margin.
Style the icon background, radius, color, and size.
Style the heading background, padding, margin, and border.
Heading Text Style
Style the heading text color, padding, and typography.
Style the content alignment, padding, margin, background, and radius.
Content Title Style
Style the content title color, typography, and spacing.
Content Text Style
Style the text title color, typography, and spacing.
Content Button Style
Style the content button color, typography, and spacing.
Content accordion synced with hotspots widget.