This article covers how to add and configure the Accordion Widget in the Thryv® Website Builder, including content editing options, display settings, design options, and important considerations when changing the accordion layout. This article does not cover adding other widget types to your website. For help adding widgets to your website, see how to add widgets to your website in the Thryv Website Builder.

Why the Accordion Widget Helps You Organize Content on Your Website

Long web pages with large blocks of content can overwhelm visitors and cause them to leave before finding the information they need. The Accordion Widget in the Thryv Website Builder solves this by compressing large amounts of content into a series of clickable titles that expand only when a visitor selects them. The result is a cleaner, more navigable page that guides visitors to the information they are looking for without requiring them to scroll through everything at once. The Accordion Widget is particularly effective for displaying FAQs, pricing breakdowns, product specifications, and terms and conditions — any content that benefits from being organized into clearly labeled, collapsible sections.

How to Add the Accordion Widget to Your Website

To add the Accordion Widget to your website, drag and drop the Accordion Widget from the widget panel onto any section of your page. For help locating and adding widgets, see how to add widgets to your website in the Thryv Website Builder.

The screenshot above shows the Thryv Website Builder page editor with the Accordion Widget being placed onto the page using drag and drop. The widget panel on the left displays the available widgets. The Accordion Widget can be dropped into any section of the page.

How to Edit the Content of Your Accordion Widget

After adding the Accordion Widget to your page, the content editing menu opens automatically. Use the content editing menu to add, remove, or modify the items in the accordion. Each item in the accordion has a title and a content area that expands when selected by a visitor.

The screenshot above shows the Accordion Widget content editing menu in the Thryv Website Builder. The menu displays fields for editing the title and content of each accordion item. Options to add new items and remove existing items are also available in the content editing menu.

How to Set Display Options for Your Accordion Widget

The content editing menu includes two display settings that control how the accordion appears when visitors first open the page:

• Initial state — Choose whether all accordion items are collapsed when the page loads, or whether the first item is expanded by default.

• Expansion behavior — Choose whether visitors can expand only one accordion item at a time, or whether multiple items can be expanded simultaneously.

The screenshot above shows the display settings in the Accordion Widget content editing menu. The initial state setting controls whether all items are collapsed or the first item is expanded when the page loads. The expansion behavior setting controls whether visitors can expand one item or multiple items at the same time.

How to Use Title Icons in the Accordion Widget

Depending on the layout selected for your Accordion Widget, each item may display a Title Icon — a small icon that appears next to the item title to visually indicate the type of content inside. Title icons can be set differently for each item in the accordion. For example, a clock icon can be added next to an event time item, or a money icon can be added next to a pricing item. Title icons are configured in the content editing menu for each individual accordion item.

How to Edit the Design of Your Accordion Widget

The design editing menu controls the visual appearance and layout of the Accordion Widget. To open the design editing menu, select Edit Design from the widget content menu. The following design options are available in the Accordion Widget design editing menu:

• Layout — Change the overall layout of the accordion widget.

• Title and Description text style — Edit the font, size, and color of the title and description text for each accordion item.

• Expandable Icon design — Edit the appearance of the icon that visitors select to expand or collapse each accordion item.

• Frame Style — Edit the design options for the overall accordion widget container, including borders and background.

• Spacing — Adjust the spacing of the accordion widget and the spacing between individual items.

The screenshot above shows the Accordion Widget design editing menu in the Thryv Website Builder. The menu displays all available design options including the layout selector at the top, text style settings for the title and description, expandable icon design options, frame style settings, and spacing controls. Design settings such as spacing and width are configured per device — verify the design settings for both desktop and mobile views after making changes.

Frequently Asked Questions

What does this article cover?

This article covers how to add and configure the Accordion Widget in the Thryv Website Builder, including content editing options, display settings, title icons, design options, and important considerations when changing the accordion layout. This article does not cover adding other widget types to your website. For help adding widgets to your website, see how to add widgets to your website in the Thryv Website Builder.

What happens to my settings when I change the accordion layout?

Changing the layout of the Accordion Widget may override some settings that were previously configured, such as spacing between items. After changing the layout, review all design settings and recreate any settings that were removed or reset by the layout change.

What is the difference between the Title Icon and the Expandable Icon?

The Title Icon is the icon displayed next to the item title on layouts that support title icons. The title icon can be set differently for each individual accordion item and is used to visually indicate the type of content inside that item. The Expandable Icon is the icon that appears on all accordion items and is selected by visitors to expand or collapse the item. The Expandable Icon is the same across all items in the accordion and is configured in the design editing menu.

Do accordion design settings apply to both desktop and mobile?

No. Design settings such as spacing, width, and other layout options are configured per device in the Thryv Website Builder. After configuring the Accordion Widget design settings for desktop, switch to the mobile view in the Website Builder and verify that the design settings are correct for mobile as well. Settings configured in desktop view do not automatically apply to mobile view.