Accordion

The Accordion addon in SiteOrigin Premium adds additional functionality and style settings to the Accordion widget. These extra settings allow you to take full control over the widget.

View the Accordion addon demo.

Requirements

To make use of this addon, go to PluginsSiteOrigin Widgets and ensure the SiteOrigin Accordion widget is activated. Next, go to SiteOriginPremium Addons and activate the Accordion addon.

Usage

The below settings are those added by the SiteOrigin Premium Accordion addon. To view the complete documentation for the Accordion widget, please, see the Widgets Bundle documentation page.

The following additional settings will be added to the Accordion widget when you activate the Accordion addon:

Presets:
The presets dropdown offers various templates for the Accordion widget. Please, note that using a preset will override some or all of the current form values. The following preset designs are available: Flat, Wire, Rounded.

Panels

Panel Items

Title icon
Optionally select an icon to be displayed next to the accordion panel title.

Title icon image:
If you’d like to add a custom icon or image you can make use of the Title icon image setting.

Content type:
In addition to a regular content field, you’ll be able to select a Layout Builder field. This will allow you to build a complete Page Builder layout within the accordion panel.

Maximum number of simultaneous open panels:
For example, if you only want users to be able to open one panel at a time, forcing closed all other open panels, enter 1. If you don’t want to restrict the number of open panels you can leave this field blank.

Use anchor tags in the URL:
If you’d like to link to a specific accordion panel, enable this setting. It’ll add a unique anchor tag to the URL for each panel added.

Initially scroll to panel:
The number of the panel, starting at 1, to which to scroll when the page first loads. This setting requires Use anchor tags in the URL setting to be enabled in order to function.

Design Settings

Headings

Title alignment:
Align the heading title to the left, right or center.

Title icon location:
Choose the location of the title icon if one has been added, left or right.

Title font:
Select the title font family.

Title font size:
Select the title font size.

Title text-transform:
Choose between None, Capitalize, Uppercase or Lowercase.

Border radius:
Select the border-radius for the top, right, bottom and left sides of the heading.

Padding:
Select the padding for the top, right, bottom and left sides of the heading.

Display open/close icon:
Choose to display heading open and close icons.
Open icon: Select the icon that will indicate to users to open the panel.
Close icon: Select the icon that will indicate to users to close the panel.

Open/close icon location:
Choose between left or right.

Panels

Font:
Select the panel font family.

Font size:
Select the panel font size.

Border radius:
Select the border-radius for the top, right, bottom and left sides of the panel.

Padding:
Select the padding for the top, right, bottom and left sides of the panel.