How To Use Dynamic Accordion Section Webpart

Hi @Anonymous

Based on your description, I understand that you are trying to use the Dynamic Accordion Section Webpart connected to a SharePoint list called "Glossary". While the web part successfully connects to the list and changes the category heading based on your Choice column (e.g., Researcher Agent), the actual accordion items and content fail to load, leaving an empty area underneath the heading.

According to the official README and documentation for this open-source SPFx sample, this web part has very strict data schema dependencies regarding SharePoint column types. Specifically, the web part's property pane dropdown fields for Accordion Title and Accordion Content are coded to filter and look for specific column types.

Because your current columns are set to Single Line of Text, one of two things is happening:

• The mapping for the Title and Content fields inside the property pane was left blank.
• The dropdowns are completely filtering out your Single Line columns, making them unselectable.

This is why the category filtering behaves correctly (as it reads the Choice column), but the accordion grid collapses into an empty view.

To resolve this behavior, please try the following troubleshooting solutions:

-Adjust Your SharePoint List Column Types

The cleanest way to fix this is to align your "Glossary" list structure with the exact data types expected by the web part component:

Navigate to your Glossary list > List settings (or click the column headers to modify them) > Change (or recreate) your columns to match these specifications:

• Category: Keep this as a Choice column (the web part already recognizes this successfully).
• Definition (Content): Change this column type from Single line of text to Multiple lines of text. Crucially, ensure that Use rich text (or Enhanced rich text) is enabled. The web part requires an HTML/Rich Text data structure to map the collapsible content area properly.
• Term (Title): If the property pane doesn't let you select your Single line column for the accordion header, temporarily change this to Multiple lines of text (plain text option is fine) to see if it populates in the dropdown list.

Edit your SharePoint page and click the edit pencil icon on the Dynamic Accordion Section Webpart > In the configuration property pane, explicitly re-map all four key dropdown fields: Select your Glossary list, your Category column, your Term column as Title, and your Definition column as Content > Republish the page.

-Verify Property Pane Complete Configuration

Before altering column metadata, double-check that the web part properties are not partially configured. Enter page edit mode, open the web part settings, and verify that no mapping fields are throwing a validation error or sitting on a blank placeholder default value. In many SPFx templates, the rendering engine will output a completely empty body segment until every required column binding is fully satisfied.

-Deploy via the Official Repository List Template

The repository source for this specific Dynamic Accordion web part bundle often ships with a preconfigured list deployment template (such as an .stp file or a site script schema package). If your current list continues to experience mapping errors, create a fresh sandbox list using their official template file to guarantee that the background column IDs match what the web part's code expects out-of-the-box.

-Native Maintenance Alternatives

If you find that modifying your list data types breaks your current data capture practices, you can achieve a highly stable, low-maintenance accordion effect using these modern alternatives:

• Modern List JSON Column/View Formatting: You can apply native SharePoint JSON formatting to a Grouped View of your Glossary list. This creates a clean, responsive, out-of-the-box accordion style directly within a standard SharePoint List Web Part without requiring custom SPFx web parts.
• PnP React Accordion Control: If you are building or editing custom SPFx code, utilizing the standardized PnP Reusable React Controls library provides a much more flexible layout binding for any text string variations.

Please try changing your Definition column to a Multiple lines of text (Rich Text) column first, as this column type mismatch is almost always the cause behind a blank content pane layout crash in this web part!

Let me know how it goes or if you notice any mapping errors in your configuration panel.

If the answer is helpful, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click ""Comment"".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.