Skip to content
  • There are no suggestions because the search field is empty.

Getting started

How to configure and use the Accordion app by Accelerator 365

The Accordion app allows you to display content in collapsible sections, helping users quickly scan information and expand only what’s relevant. It’s perfect for FAQs, policies, guidance content, or any long blocks of text on SharePoint pages.

Jump to

Configuring the app for the first time

To add the Accordion app:

  1. Select Edit on your SharePoint page.

  2. Select + Add a new web part, then choose the Accordion app.

  3. Once added, the Accordion app will display as a placeholder and is ready for you to add content.

Adding a new section

Accordion sections are the individual collapsible areas within the app.

To add a section:

  1. Enter Edit mode on the app

  2. Click + Add new section at the top of the app

  3. Enter a title in the section header

  4. Add your content directly inside the Accordion section. Each section supports rich content, including:

    1. Formatted text

    2. Hyperlinks

    3. Images and Videos

    4. Tables

Customizing the appearance

The Accordion app can be styled to match your page and site branding. You have two main options:

  • Section title color – choose from SharePoint theme colors or the standard colors supplied by SharePoint

  • Section background color – choose from the same set of SharePoint theme or standard colors

These settings help ensure your accordion integrates seamlessly with the rest of your page.

Search and content visibility

The Accordion app includes features to help users find and view content easily:

  • Search – enable to allow users to find content within sections, and customise the placeholder text that appears in the search box

  • Allow multiple sections to be open at the same time – toggle this option to control whether users can expand more than one section simultaneously

Organizing your sections

From the property pane, you can manage all your Accordion sections:

  • Reorder sections using the drag handles

  • Rename a section either in the property pane or by double-clicking the section title directly on the web part

  • Open a section on page load – select a default section to display in an expanded state when the page loads

  • Delete a section if it’s no longer needed

Related articles