The “Content Accordion Widget” allows you to display collapsible content sections for free in WordPress Elementor websites. Organize information efficiently by allowing users to expand and collapse sections as needed. Customize the design, icons, typography, and animations to match your site’s style seamlessly.
Let’s explore the features of the “Content Accordion Widget” below.
Elementor Content Accordion Tutorial Video
Add a Free Content Accordion 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 in Elementor Content Accordion
First Apperance
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.
- Off
- Desktop
- Mobile
- Desktop + Mobile
Icon Placement
- Icon First
- Icon Last
Elementor Content Accordion Layout Settings
Show Title
Enable / Disable title inside of item content.
Show Content
Enable / Disable content inside of item content.
Heading HTML Tag
Change the HTML tag for the heading. Used for SEO purposes.
Show Button
Enable / Disable button inside of item content.
Closed Icon
Choose an icon for a closed accordion-item (supports SVG upload)
Open Icon
Choose an icon for a open accordion-item (supports SVG upload)
Connected Widgets Settings for Elementor Content Accordion
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.
Jump to Item Link in Elementor Content Accordion
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
Elementor Content Accordion Items Settings
Manage the items of the accordion using the repeater field.
- Add new items
- Duplicate items
- Delete items
- Reorder Items
- Edit Items
Title
Set the heading for the accordion item.
Content Type
- 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.
Heading
Title for content inside item.
Link
Link for the button inside item content.
Button Text
Text for the button inside item content.
Elementor 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.
Elementor Content Accordion Items Style
Style the item background, border, shadow, and margin.
Icon Style in Elementor Content Accordion
Style the icon background, radius, color, and size.
Elementor Content Accordion Heading Style
Style the heading background, padding, margin, and border.
Elementor Content Accordion Heading Text Style
Style the heading text color, padding, and typography.
Elementor Content Accordion Content Style
Style the content alignment, padding, margin, background, and radius.
Elementor Content Accordion Content Title Style
Style the content title color, typography, and spacing.
Elementor Content Accordion Content Text Style
Style the text title color, typography, and spacing.
Content Button Style in Elementor Content Accordion
Style the content button color, typography, and spacing.
Usage Examples of Elementor Content Accordion
Here are some live use cases for the Content Accordion widget.
Free Elementor Content Accordion with Hotspots.
Free Elementor Content Accordion with a Synced Content Slider.
Thank you for using the Content Accordion Widget for Elementor! With its sleek design and interactive functionality, this is the best Content Accordion Widget for Elementor, perfect for organizing and displaying content in a compact, user-friendly way. If you have any questions or need assistance, feel free to reach out. For more use cases and examples visit the live demo on our website.