Accordion

4 min read Updated

The Accordion addon adds settings to the free Accordion widget. You can apply a ready-made design, add an icon or image to each panel title, build panel content with Page Builder, limit how many panels stay open, and style the open panel, fonts, borders and padding.

For the widget’s other settings, see the Accordion widget documentation.

View the Accordion demo.

Requirements

Go to SiteOriginPremium Addons and activate Accordion. This also activates the Accordion widget.

Presets

The Presets setting is at the top of the widget form.

Presets
Applies a ready-made design: Flat, Wire or Rounded. A preset replaces some or all of the current form values. Flat and Rounded also set Maximum number of simultaneous open panels to 1.

Panel Settings

These settings are in each item of the Panels list, between Title and Content.

Title icon
An icon that shows next to the panel title.

Title icon image
Your own image to show next to the panel title. Choose an image from the Media Library or enter an external URL. When you set an image, it shows in place of the Title icon.

Title icon image size
Shows when you set a Title icon image. Choose a WordPress image size, or Custom Size to enter a width and height in pixels. Thumbnail (Theme-defined) scales the image to the height of the title text. Other sizes show the image at that size. Default: Full.

Content type
Text uses the normal Content editor. Layout builder replaces it with an Open Builder button, so you can build the panel content with Page Builder rows, columns and widgets. Layout builder needs Page Builder by SiteOrigin. Default: Text.

Open Panels

This setting is below the Panels list, above Design.

Maximum number of simultaneous open panels
Limits how many panels a visitor can open at the same time. When a visitor opens a panel past the limit, a panel that was open before closes. Enter 1 to keep only one panel open. Leave it empty for no limit. The limit does not apply when the page loads, so do not set more panels to Open than the limit.

The Initially scroll to panel setting shows here too. At the moment, it has no effect.

Design Settings

The addon adds settings to the two groups of the Design section: Headings and Panels. It also changes Border width in both groups to four inputs: top, right, bottom and left.

Headings

Background active color
The background of the heading of an open panel.

Title active color
The title color of an open panel.

The active colors apply while the pointer is not over the heading. On hover, the hover colors apply.

Title alignment
Left, Right or Center. Default: Left.

Title icon location
Shows the title icon or image to the Left or Right of the title. Default: Left.

Title font
The font of the heading titles. You can choose a Google Font. Default: the theme font.

Title font size
The size of the heading titles.

Title text transform
None, Capitalize, Uppercase or Lowercase.

Border active color
The border color of the heading of an open panel. The border shows only when you set a Border width.

Border radius
Rounds the top left, top right, bottom right and bottom left corners of each heading.

Padding
The space inside each heading: top, right, bottom and left. Default: 15px 30px 15px 30px.

Premium open and close icon settings in the Accordion widget

Display open/close icon
Shows the icon that opens and closes a panel. Default: on.

Open icon
The icon on a closed panel. Shows when Display open/close icon is on. Default: a plus sign.

Close icon
The icon on an open panel. Shows when Display open/close icon is on. Default: a minus sign.

Open/close icon location
Left or Right. Shows when Display open/close icon is on. Default: Right.

Panels

Font
The font of the panel content. You can choose a Google Font. Default: the theme font.

Font size
The size of the panel content text.

Border radius
Rounds the top left, top right, bottom right and bottom left corners of the content area.

Padding
The space inside the content area: top, right, bottom and left. Default: 15px 30px 15px 30px.

To open a panel from a link, activate the Anchor ID addon. It adds Add anchor ID in the URL and Anchor ID to the Accordion widget, above Design.