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
Add a unique anchor tag to the page URL for each accordion panel allowing linking to specific panels as required. The panel title will be added to the URL when the panel is open and removed from the URL when the panel is closed. To retrieve the URL for a specific panel, view the accordion on the site front-end, click on the panel title, and copy the URL.
It’s possible to link across multiple instances of the SiteOrigin Accordion and SiteOrigin Tabs widgets as long the `Use anchor tags in the URL` setting is enabled for those widgets. This means that you could open an Accordion Widget inside of SiteOrigin Tab on load that’s normally not open. of the SiteOrigin Accordion and SiteOrigin Tabs widgets as long the `Use anchor tags in the URL` setting is enabled for those widgets.
Linking across multiple widgets is more complicated however as only anchor tags from one widget at a time will appear in the URL. You’ll need to generate the URL containing anchor tags for one widget, and then do the same for another – be sure to note the generated URL. Then you’ll need to merge the URLs together. Take for example the following generated URLs with anchor tags:
In this example, I want to open the About Tab, and then open the Contact and Map Panels. The URL to do this is:
The initial hash is required to identify a series of anchor tags. There can only be a single hash in the url.
Each anchor tag is comma-separated. You should order the anchors in the order you wish for them to open in.
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.