Accordion

Efficiently display content in expandable sections, maximizing space for improved organization.

Requirements

To make use of this widget, go to PluginsSiteOrigin Widgets to activate the SiteOrigin Accordion Widget.

The Accordion Widget is ready to be used anywhere:

Page Builder: Insert widgets in Page Builder by SiteOrigin in either the Classic Editor or Page Builder Layout Block in the Block Editor.
Block Editor: 100% Block Editor compatible. Insert widgets using the SiteOrigin Widgets Block featuring a live widget search form.
Theme and Plugin Widget Areas: Insert widgets into any theme or plugin widget area.

Settings

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. Available as part of SiteOrigin Premium. The following preset designs are available: Flat, Wire, Rounded. View a demo of these presets.

Panels

Here you’ll add your accordion panels which consist of a title and a content area. Use the Add button to add as many items as you need in your accordion. On the right of each item, you’ll find three icons. The down arrow opens the item, the page icon duplicates the item and the cross icon deletes the item.

Panel Item Settings

Within each panel item you’ll find the following settings:

Title
The title of the panel item.

Title Icon
Optionally select an icon to be displayed next to the accordion panel title. This setting is added by the SiteOrigin Premium Accordion addon.

Title Icon Image
If you’d like to add a custom icon or image you can make use of the Title icon image setting. This setting is added by the SiteOrigin Premium Accordion addon.

Content Type
By default, a text field will be available for your item content. If you’re using SiteOrigin Premium and have the Accordion module enabled you’ll also be able to select a Layout builder. A Layout builder is an instance of Page Builder, this means you build a layout consisting of columns and rows and add any widget you’d like, within the item content area.

If you’d like to process shortcodes in the content field, select the Layout builder option (part of the Accordion addon in SiteOrigin Premium) and insert a SiteOrigin Editor which will output the shortcode.

Content
Having made your content type selection you’ll be able to insert content in the field provided.

Automatically Add Paragraphs:
Enable to automatically add paragraphs when using the text field content-type option.

Initial State
Choose whether this panel should be open or closed when the page first loads.

Before moving onto the Design Settings you can also choose:

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. Available as part of SiteOrigin Premium.

Add panel anchor id in the URL
If you’d like to link to a specific accordion panel, enable this setting. It’ll add a unique anchor id to the URL for each panel added. Available as part of SiteOrigin Premium.

Initially Scroll to Panel
The number of the panel, starting at 1, to which to scroll when the page first loads. Requires Add panel anchor id in the URL setting to be enabled. Available as part of SiteOrigin Premium.

Design Settings

Here you’ll find the design settings for both the accordion panel headings and content.

Headings

The following settings are available to style the accordion headings. The open and close action of each accordion item is triggered by clicking on an item heading.

  • Background Color: Select the heading background color.
  • Background Hover color: Select the heading background hover color (optional).
  • Title Color: Select the color of the title text.
  • Title Hover Color: Select the hover color of the title text (optional).
  • Title Alignment: Align the heading title to the left, right or center. Available as part of SiteOrigin Premium.
  • Title Icon Location: Choose the location of the title icon if one has been added, left or right. Available as part of SiteOrigin Premium.
  • Title Font: Select the title font family. Available as part of SiteOrigin Premium.
  • Title Font Size: Select the title font size. Available as part of SiteOrigin Premium.
  • Title Text Transform: Choose between None, Capitalize, Uppercase or Lowercase. Available as part of SiteOrigin Premium.
  • Border Color: Select the heading border color.
  • Border Hover color: Select the heading border hover color (optional).
  • Border Width: Select the border width for the top, right, bottom and left sides of the heading.
  • Border Radius: Select the border radius for the top, right, bottom and left sides of the heading. Available as part of SiteOrigin Premium.
  • Padding: Select the padding for the top, right, bottom and left sides of the heading. Available as part of SiteOrigin Premium.
  • Display Open/Close icon: Choose to display heading open and close icons. Available as part of SiteOrigin Premium.
    • 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. Available as part of SiteOrigin Premium.

Panels

  • Background Color: Select the panel background color.
  • Font: Select the panel font family. Available as part of SiteOrigin Premium.
  • Font Size: Select the panel font size. Available as part of SiteOrigin Premium.
  • Font Color: Select the panel font color.
  • Border Color: Select the panel border color.
  • Border Width: Select the border width for the top, right, bottom and left sides of the panel.
  • Border Radius: Select the border radius for the top, right, bottom and left sides of the panel. Available as part of SiteOrigin Premium.
  • Padding: Select the padding for the top, right, bottom and left sides of the panel. Available as part of SiteOrigin Premium.
  • Bottom Margin: Select the bottom margin. This is the space below each panel, before the next heading in the accordion.

Global Settings

Global settings target all Accordion Widgets and are located at PluginsSiteOrigin Widgets. Locate the Accordion Widget or use the search field. Click the Settings button.

Scroll Top
When opening the panel, scroll the user to the top of the panel. This setting is default enabled.

Quick Setup: Basic Settings Only – Without SiteOrigin Premium

Custom CSS Customizations

Hide the Panel Item Open/close Icon

.sow-accordion-open-close-button {
	display: none;
}

Advanced Customizations

Adjust the Scroll Offset Used When Opening Accordion Items

add_filter( 'siteorigin_widgets_accordion_scrollto_offset', function( $offset ) {
	return 80;
} );