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.
- SiteOrigin Premium Plugin
- SiteOrigin Widgets Bundle Plugin
- Optional: Page Builder by SiteOrigin Plugin
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.
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:
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.
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.
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.
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.
Select the title font family.
Title font size:
Select the title font size.
Choose between None, Capitalize, Uppercase or Lowercase.
Select the border-radius for the top, right, bottom and left sides of the heading.
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.
Select the panel font family.
Select the panel font size.
Select the border-radius for the top, right, bottom and left sides of the panel.
Select the padding for the top, right, bottom and left sides of the panel.