The Icon Accordion Widget allows you to to displays any content in a unique interactive accordion layouts. This widget enables you to quickly and easily create an interactive icon accordion with its wide range of customization and styling options. It also supports advanced options such as Remote Connection and syncing with other widgets.
Let’s look at each of the options in the “Icon Accordion Widget” below.
Install Icon Accordion Widget for 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 “Icon Accordion”
- Hover over the widget in the search results and click install
- Add your “Icon Accordion” widget to any Elementor Page
General Settings #
First Accordion Closed
Keep the first accordion in closed state.
Heading Direction
Set the accordion heading direction.
- Regular
- Reverse
Show Icon
Show/Hide the icon.
Show Expand
Show/Hide the expand icon.
Close Other on Open
Close other accordion on opening one.
Icons Settings #
Expand Icon
Choose an icon for expand button.
Collapse Icon
Choose an icon for collapse button.
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.
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 Settings #
Accordion Name
Type the accordion name.
With this option you can create a go to accordion item link.
Items Settings #
Manage the items of the accordion using the repeater field.
- Add new items
- Duplicate items
- Delete items
- Reorder Items
- Edit Items
Heading
Type heading for accordion.
Icon
Choose an icon to display.
Content Type
Select the content type from below options.
- Content - To type text content to display.
- Template - Choose Elementor template to display.
Override Icon Background Color
Set the background color for icon.
Override Heading Background
Set background color for heading.
Icon Accordion Widget Styling #
Every aspect of the widget’s design can be controlled through different styling options. Choose colors that complement the style of your website. You can modify the text, icons, fonts, and layout to make the widget look and work the way you want.
Item Styling #
Set the spacing, border, shadow, background, and radius of items.
Heading Styling #
You can style the heading background, background image, typography, padding, radius, text color, and border.
Content Styling #
You can set the content background, typography, text color, padding, radius, border, and marging.
Icon Styling #
Set the icon size, background, color, radius, border, and spacing.
Expand Collapse Styling #
In this section, set the icon size, background, color, radius, border, spacing, and shadow.
Heading Hover Styling #
You can style the heading hover background, text color, icon background, and icon color.
Heading Active Styling #
You can set the heading active background, text color, icon background, and active icon color.
Usage Examples #
Here are some live use cases for the Icon Accordion widget.
