help center

On this page

Accordion widget

Last Update: December 14, 2023
  • If you activate the nested elements experimental feature, the new Accordion widget incorporates the capabilities of Toggle widget and replaces it. This means the Toggle widget will no longer be available. Existing toggles are unaffected by this change and they can still be edited. 
  • if you activate the nested elements experimental feature, the default Accordion widget is replaced with a new Accordion widget which can include nested elements. For more details see, Add elements to your Accordion widgets.

The Accordion Widget is used to display text in a collapsed, condensed manner, letting you save space while still presenting an abundance of content.

With the Accordion, site visitors can scan item titles, and choose to expand an item.

The Accordion is  similar to the Toggle widget, but there are two main differences: 

  • When a page is loaded, the first item of the Accordion widget is expanded, while all other items remain collapsed. With the Toggle widget, however, all items are collapsed when a page is first loaded.
  • Only one item of an Accordion can be expanded at a time. When you expand an Accordion item, the previously opened item automatically collapses. With the Toggle widget, however, visitors can open as many items as they want. 
Accordion GIF Accordion widget 1

Content tab

Accordion

Accordion Items Title & Content:Enter the title and description for each item.
Add Item: Add more accordion items to the list.
IconSelect the icon to represent the action of expanding an item. Choose either None, Upload SVG, or select an icon from the Icon Library. If Icon Library is chosen, a Recommended tab is displayed in the Library which shows recommended icons to represent the expanding concept. 
Active IconSelect the icon to represent the action of collapsing the active item. Choose either None, Upload SVG, or select an icon from the Icon Library. If Icon Library is chosen, a Recommended tab is displayed in the Library which shows recommended icons to represent the collapsing concept.
Title HTML TagSet the HTML tag used for the title to H1- H6 or DIV.
FAQ SchemaUse the toggle to enable or disable the option to use schema
LimitationThis option can only be enabled for one widget per page.

Style

Accordion

Border WidthSet the thickness of the border around the accordion and between each item
Border ColorChoose the color of the border around the accordion and between each item

Title

Background: Choose the color of the title’s background
ColorChoose the color of the non-active titles’ text
Active ColorChoose the color of the active title’s text
TypographySet the typography options for the titles
PaddingSet the padding for the titles

Icon

AlignmentAlign the icon to the left or right of the title
ColorChoose the color of the icons
Active ColorChoose the color of the active icon
SpacingControl the spacing between the icon and the title

Content

BackgroundChoose the background color of the content
ColorChoose the text color of the content
TypographySet the typography options for the content
PaddingSet the padding for the content

Advanced

Set the Advanced options that are applicable to this widget

Add elements to your Accordion widgets

If you are using the Nested Elements experimental feature, the Accordion widget is automatically upgraded to include nested elements. This allows you to add elements such as images and buttons to your Accordions. The new Accordion widget incorporates the features of the Toggle widget so the Toggle widget is no longer available. 

Note: Existing Accordion and Toggle widgets are unaffected by this change. You will be able to edit them using the previous options.

Important: The Accordion widget is not compatible with the Loop widget because nested elements do not work with repetitive elements.

Creating an Accordion with nested elements

To create an Accordion widget with nested elements:

  1. Add the Accordion widget to the canvas. See Add elements to a page for details.
    image Accordion widget 3
  2. On the canvas, by default, the Accordion widget appears with  Item #1 expanded. It automatically includes a  built-in container.  Every item has a container already built-in.  
    image 1 Accordion widget 5
  3. Add elements to the empty container.

Note: Containers are an element, therefore you can add more containers to the built-in container.

Accordion settings (with nested elements)

Content tab – Layout

In the Content tab, expand the Layout section to determine the number of tabs and their titles.

Content tab Layout Accordion widget 7


Items

Each tab of the Accordion is an item. Click an item to edit it. Editing the item allows you to:

Add Item

Click to add a new tab.

Item Position

Determines where the tab’s name will appear.

Icon

By default, an icon appears next to the tab’s name. Visitors click this icon to expand and collapse the tab.

Position

Determine the place the icon: on the left or right of the tab name.

Expand

Provides three options for the icon that opens the tab:

  • none icon Accordion widget 9 Select not to use an icon
  • upload svg icon Accordion widget 11 Upload an SVG file to use as an icon. See Enable SVG support.. 
  • plus Accordion widget 13 Choose an icon from the icon library. 

Collapse

Provides three options for the icon that opens the tab:

  • none icon Accordion widget 9 Select not to use an icon
  • upload svg icon Accordion widget 11 Upload an SVG file to use as an icon. 
  • minus Accordion widget 19 Choose an icon from the icon library. See Enable SVG support.

Title HTML tag

Use the dropdown menu to designate the title of the price list as a header (H1-6). This helps search engines find and understand the price list, boosting SEO. The title can also be tagged as a paragraph, span or div.

FAQ Schema

FAQ Schema is a special markup that tells search engines that this widget contains an FAQ. Marking an Accordion widget as an FAQ helps boost the visibility of your FAQs. It’s important to only mark one Accordion widget per page as an FAQ. 

Content tab – Interactions

In the Content tab, expand the Interactions section to determine how the tabs open and close.

Accordion content tab interactions Accordion widget 21

Default state

Determines how the Accordion appears by default:

  • First expanded –  The first item is expanded .
  • All collapsed – No items are expanded.

Max items expanded

Determines how many tabs can be open simultaneously.

  • One – One tab can be open at a time. 
  • Multiple – Unlimited number of tabs can be open simultaneously 

Animation Duration

Determines how long it takes for tabs to open and close. 

Style tab – Accordion

In the Style tab, expand the Accordion section to determine how the tabs will appear.

Style tab accordion Accordion widget 23

Space between items

Use the slider to increase and decrease the amount of room between tabs.

Distance from content

Use the slider to increase and decrease the amount of room between the tab title and elements in the tab.

Setting

Normal – The default style

Hover – The style when users mouse over the tab

Active – The style when the tab is open

Background Type

Choose the background. For more details, see Create a Background

Border Type

Choose the border type. For more details, see Border type.

Border Radius

Choose the border radius. For more details, see Border radius tools

Padding

Add padding. For more details, see Padding and margins.

Style tab – Header

In the Style tab, expand the Header section to determine how the tabs’ titles will appear.

Style tab Header Accordion widget 25

Typography

Choose how your text will appear to visitors. For details, see Typography.

Settings

The headers can have three different styles:

Normal – The default style

Hover – The style when users mouse over the tab

Active – The style when the tab is open

Color

Choose a color: either use the color picker or a global color.

Size

Use the slider to determine the size of the icon next to the tab title. For more details, see Units of measurement.

Spacing

Use the slider to determine the amount of room between the tabs’ title and the icon.

Color

Choose an icon color: either use the color picker or a global color.

Style tab – Content

In the Style tab, expand the Content section to determine how the tabs’ content will appear. 

Style tab Content Accordion widget 27

Background Type

Choose the background. For more details, see Create a Background

Color

Choose a color: either use the color picker or a global color.

Border Type

Choose the border type. For more details, see Border type.

Border Radius

Choose the border radius. For more details, see Border radius tools.

Padding
Accordion Content

Have more questions? We’re more than happy to assist.

Link is copied to clipboard!
On this page

Is this article helpful?

Share this article