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
General Settings
Determine how the accordion first shows up.
- First Item Open
- All Items Closed
- All Items Open
Determine whether to enable automatic close of author items when a different item is triggered open.
Scroll to the top of the item heading.
- Off
- Desktop
- Mobile
- Desktop + Mobile
- Icon First
- Icon Last
Layout Settings
Enable / Disable title inside of item content.
Enable / Disable content inside of item content.
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
Use remote control widgets to create advanced creative layouts.
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:
<a class="ue-link-goto-item" href="#" data-name="yourname" data-num="2">
Jump To Item
</a>
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:
data-name|main,data-num|2,class|ue-link-goto-item
Items Settings
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.
Items Style
Style the item background, border, shadow, and margin.
Icon Style
Style the icon background, radius, color, and size.
Heading Style
Style the heading background, padding, margin, and border.
Heading Text Style
Style the heading text color, padding, and typography.
Content Style
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.
Usage Example
Content accordion synced with hotspots widget.
Content Accordion synced with Content Slider.
