Accordion Heading Web Part – supporting a FAQ page solution

Have you ever wanted to build an FAQ-style page in SharePoint Online where the heading section supports collapse/expand?  

Accordions are typically used on longer pages where readers benefit by shortening the pages with sections that are expandable / collapsible at the heading. This reduces the scrolling and condenses the content by topic or heading, allowing the reader to quickly scan for the content of interest and expand the section to reveal the content.

Benefits

Using headings will help you to organise information on the page, it helps readers to quickly scan the page with topics. Allowing readers to have control over the content by expanding it or deferring it for later lets them decide what to read and what to ignore. Giving readers control is a human centred design approach.

Applying accordions to long, content-rich pages supports the idea that:

• Collapsing the page minimizes scrolling, reducing the information on a page.
• The headings help navigate the content and build a mental model by grouping into clickable sections.
• Both encourage readers to seek out content within the collapsed sections and also make less daunting large amount of content on one page.
• Keeping the user on the same page by using an accordion to consolidate large content may be a better alternative to page links. Linking off to sub-pages is problematic as it breaks people’s mental model of the content; clicking a link will load a new page and therefore disconnects from the original accordion content. The Accordion Heading Web part offers an easy way to manage and style your headings in a SharePoint modern page.

Our solution

Qualitem has a web part that supports an accordion heading on a single modern page that can collapse and expand to hide and show one or many sections.  

Some accordion-based solutions work from a list, our web part is purpose built for a modern page scenario. 

The following are some advantages of using a modern page as an FAQ:

1. You can include any type of content within the accordion section as long as there’s a modern page web part to supports it.   Using a list as the content source limits the content that can be added to a multi-text list field. 
2. Formatting of the section structure is configurable on a modern page.   You have a few more options formatting the sections within the expand/collapse section (for example, multi-column sections).
3. .

Features

Heading style dropdown

The heading dropdown supports changing the size of the heading text to match the out-of-box styling of each heading level.

Default settings – simple heading text

By default this web part is customized to add a simple heading style (not collapsible). All accordion features are disabled by default and the heading text is treated the same as type a heading in to a Text web part.

Heading with ‘Back to top’, Show Permalink icon and Layout

You can add “Back to top” or permalink icon to web part. It helps you to access top of the page or get a link (#) to your heading. With “Show permalink icon”, you may enable or disable the permalink in your heading. A permalink is a static hyperlink to either a web page or a particular heading on web page that directly positions the user to the heading location.

You can also select the preferred permalink slug name. The slug name is the reference name. If you leave the slug name blank, the web part will insert a placeholder name for you by using your current heading text. The Layout feature aligns either the “back to top” link and/or “permalink icon” on the left or right.

The following images depicts the “back to top”, permalink icon and left justified layout as selected:

Collapsible Heading

With “Collapse section” setting you can make the heading collapsible. “Collapse section on load” setting is “On” by default which means the heading will be collapsed by default when the page loads. You can select “collapse all when I expand” setting to make the heading work as an accordion and collapse all other headings when they are registered with the same configuration. (e.g. FAQ).

Collapsed

The following image depicts a collapsed section and its heading.

Expanded

The following image depicts an expanded section and its heading.

Note: Only one heading can be collapsible in each section on the page, therefore if you add more than one Accordion Heading Web part to the same section, you get the following settings in the subsequent accordion web part settings. To configure the parent Accordion Heading Web part, click on (i) to navigate to the parent configuration settings.

Where to get it

All of our web parts are available via our distribution site at spfxhub.com.  

The link to the Accordion Heading web part is https://spfxhub.com/packages/qualitem-modern-page-accordion-heading-web-part.

Extend SharePoint Online with one of our other content-focused web parts in the Qualitem Marketplace, such as:

1. Table of Contents Web part: Add a table of contents on your page to help navigate using your headings.
2. Source Code Web part: For technical documentation, add our source code web part to document code snippets.