Accordion

Advanced customization and styles for Accordion Widgets, enabling organized content display, improved navigation, and engaging user interactions with personalized design options.

View the Accordion Addon demo.

Requirements

To use 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, and 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.

Add panel anchor id 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 `Add panel anchor id 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 `Add panel anchor id 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:

https://so.local/#about
https://so.local/#contact,map

In this example, I want to open the About Tab, and then open the Contact and Map Panels. The URL to do this is:

https://so.local/#about,contact,map

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 Add panel anchor id 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.