fbpx

Need Help?

Here are some good places you cant start.

Whats New?

Get updated about all the good stuff!

Vertical Progress Bar - Featured
custom-cursor-elementor
google-maps-widget

Icon Accordion

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.

  1. Go to Unlimited Elements Widget Library
  2. Search in the search bar for “Icon Accordion”
  3. Hover over the widget in the search results and click install
  4. Add your “Icon Accordion” widget to any Elementor Page

General Settings

1

First Accordion Closed

Keep the first accordion in closed state.

2

Heading Direction

Set the accordion heading direction.

  • Regular
  • Reverse
3

Show Icon

Show/Hide the icon.

4

Show Expand

Show/Hide the expand icon.

5

Close Other on Open

Close other accordion on opening one.

Icons Settings

1

Expand Icon

Choose an icon for expand button.

2

Collapse Icon

Choose an icon for collapse button.

Connected Widgets Settings

1

Enable Remote Connection

Use remote control widgets to create advanced creative layouts.

2

Widget Name for Connection

This name will be used to connect and controls this widget by other widgets.

3

Sync

You can connect two item-based widgets and sync them.

4

Sync Group

Choose the same group for two or more item-based widgets so they can sync together.

Jump to Item Link Settings

1

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
1

Heading

Type heading for accordion.

2

Icon

Choose an icon to display.

3

Content Type

Select the content type from below options.

  • Content - To type text content to display.
  • Template - Choose Elementor template to display.
4

Override Icon Background Color

Set the background color for icon.

5

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.

Download is just a click away

Get instant access to tons of Elementor goodies, completely FREE!

Hurray!

You got FREE access to the worlds leading widgets for Elementor page builder!