Accordion

5 min read Updated

The Accordion Widget shows content in panels that open and close. Each panel has a title and a content area. Use it for FAQs, service details or any long content that you want to keep short on the page.

Requirements

To use this widget, go to PluginsSiteOrigin Widgets, find Accordion and click Activate.

You can use the Accordion Widget in these places:

Page Builder: Add the widget in Page Builder by SiteOrigin, in the Classic Editor or in the Page Builder Layout Block in the Block Editor.
Block Editor: Add the SiteOrigin Accordion block. You find it in the SiteOrigin block category.
Theme and Plugin Widget Areas: Add the widget to any theme or plugin widget area.

Setup Video

This video adds an Accordion Widget in Page Builder, adds three FAQ panels and shows the result on the front end.

An FAQ accordion on the front end with the first panel open

Settings

The Accordion widget form with the Panels repeater

Title
An optional title that shows above the accordion.

Panels

Each panel has a title and some content. Click Add to add a panel. Each panel has three icons on the right: the arrow opens the panel settings, the page icon duplicates the panel and the cross deletes it. Drag a panel to change its position.

Title
The text in the panel heading. Visitors click the heading to open and close the panel. The title also sets the panel’s anchor ID. If two panels have the same title, the widget makes the second anchor unique.

Content
The panel content. It uses the WordPress editor, so you can add text, links, images and media. Paste a YouTube or Vimeo URL on its own line to embed the video. In a closed panel, the widget loads iframes, such as video embeds, only when a visitor opens the panel. The content runs the [embed] shortcode, but not other shortcodes. To use other shortcodes, see Advanced Customizations below.

Automatically add paragraphs
Adds paragraph and line break tags to the content with the WordPress wpautop() function. Default: off.

Initial state
Sets whether the panel is Open or Closed when the page loads. Default: Closed. You can set more than one panel to Open.

Design Settings

Open the Design section to style the accordion. It has two sections: Headings and Panels.

Headings

These settings style the clickable panel headings.

Background color
The heading background. Default: #757575.

Background hover color
The heading background when a visitor hovers over it. Default: #616161.

Title color
The heading text color. Default: #fff (white).

Title hover color
The heading text color on hover. Leave it empty to keep the title color.

Title HTML Tag
The HTML tag for each panel title: H1 to H6, Paragraph or Div. Default: Div. Choose a heading tag that fits the structure of your page. When you choose Paragraph or Div, the widget marks the heading as a level 2 heading for screen readers.

Border color
The heading border color.

Border hover color
The heading border color on hover.

Border width
The heading border width. The border shows only when you set a width.

Panels

These settings style the panel content area.

Background color
The content background. Default: #f9f9f9.

Font color
The content text color.

Border color
The content border color.

Border width
The content border width. The border shows only when you set a width.

Bottom margin
The space below each panel, before the next heading. Default: 10px.

Global Settings

Global settings apply to all Accordion Widgets on your site. Go to PluginsSiteOrigin Widgets, find the Accordion Widget and click Settings.

Scroll top
When a visitor opens a panel, the page scrolls to the top of that panel. Default: on.

SiteOrigin Premium

The SiteOrigin Premium Accordion addon adds these settings. All settings in this section are Premium.

Premium open and close icon settings in the Accordion widget

Presets
Applies a ready-made design: Flat, Wire or Rounded. A preset replaces some or all of the current form values.

Title icon, Title icon image and Title icon image size
Add an icon or your own image next to a panel title. These settings are in each panel.

Content type
Choose Text (default) or Layout builder. Layout builder gives the panel a Page Builder layout, with rows, columns and widgets. It needs Page Builder by SiteOrigin. Use it to add a SiteOrigin Editor Widget with a shortcode, or any other widget, to a panel.

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

Design
The addon adds these design settings:

  • Headings: Background active color, Title active color and Border active color for the open panel.
  • Headings: Title alignment (default Left), Title icon location (default Left), Title font, Title font size and Title text transform.
  • Headings and Panels: Border width for each side, Border radius and Padding (default 15px 30px 15px 30px).
  • Headings: Display open/close icon (default on), Open icon, Close icon and Open/close icon location (default Right).
  • Panels: Font and Font size.

For more information, see the Accordion addon documentation.

Anchor ID

The Premium Anchor ID addon lets you link to a panel. When it is active, the Accordion Widget has these settings:

Add anchor ID in the URL
When a visitor opens or closes a panel, the widget adds or removes that panel’s anchor in the page URL. When a visitor loads a URL with a panel anchor, that panel opens.

Anchor ID
Sets a custom anchor ID for the widget. This setting shows when Add anchor ID in the URL is on.

Advanced Customizations

Hide the Open and Close Icon

Add this CSS to your theme or to the Additional CSS section of the Customizer.

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

Change the Scroll Offset

When Scroll top is on, the widget leaves 90px of space above the panel. This helps with sticky headers. Add this PHP to your child theme’s functions.php file to change it.

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

Run Shortcodes in Panel Content

This PHP runs shortcodes in the Text content of all Accordion panels.

add_filter( 'siteorigin_widgets_accordion_render_panel_content', function( $content ) {
	return do_shortcode( $content );
} );