Accordion Widget

To use the Accordion widget, ensure its enabled in the Widgets Bundle dashboard at PluginsSiteOrigin Widgets. The Accordion widget can be inserted into any theme widget area at AppearanceWidgets or any page or post using Page Builder.

Once the Accordion widget has been inserted into your theme widget area or page/post using Page Builder, hover over it and click the Edit link to begin. You’ll find the following fields available:

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.

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.

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

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 (available as part of SiteOrigin Premium)
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.

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: Add a title icon (optional). 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.
  • 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.

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.

Quick Setup: Basic Settings Only: (Without SiteOrigin Premium)