fbpx

Need Help?

Here are some good places you cant start.

Whats New?

Get updated about all the good stuff!

February Updates
Currency Converter Cover
Layers Widget

Content Accordion

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.

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

General Settings

1

First Apperance

Determine how the accordion first shows up.

  • First Item Open
  • All Items Closed
  • All Items Open
2

Close Item when Other Opens

Determine whether to enable automatic close of author items when a different item is triggered open. 

3

Scroll to Head

Scroll to the top of the item heading.

  • Off
  • Desktop
  • Mobile
  • Desktop + Mobile
4

Icon Placement

  • Icon First
  • Icon Last

Layout Settings

1

Show Title

Enable / Disable title inside of item content.

2

Show Content

Enable / Disable content inside of item content.

3

Heading HTML Tag

Change the HTML tag for the heading. Used for SEO purposes.

4

Show Button

Enable / Disable button inside of item content.

5

Closed Icon

Choose an icon for a closed accordion-item (supports SVG upload)

6

Open Icon

Choose an icon for a open accordion-item (supports SVG upload)

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

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
1

Title

Set the heading for the accordion item.

2

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.

3

Heading

Title for content inside item.

4

Link

Link for the button inside item content.

5

Button Text

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.

Video Overview

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!