SPFx Accordion Webpart Example

I recently worked on a SharePoint Framework (SPFx) project for a client where we created an accordion webpart. In this tutorial, I will explain how to create an SPFx Accordion Web Part using sample data with the help of @pnp/spfx-controls-react in the React Framework.

Accordions are commonly used for displaying frequently asked questions (FAQs). In the example below, I’ve included some sample questions and answers to demonstrate how it works.

Follow the section below to achieve this!

SharePoint Framework Accordion Example

By this time, I hope you are familiar with setting up the environment and creating an SPFx web part using the React framework. If not, follow the links below!

• Set up your development environment for SharePoint Framework.
• (SPFx) SharePoint framework client web part example

After creating the SPFx webpart with the React framework, follow the steps below!

1. Run the below command either in the Terminal pane of VS Code or in Windows Command Prompt within the SPFx solution.

npm install @pnp/spfx-controls-react --save --save-exact

To use the pnp-spfx-controls-react, we have to install the above dependency in our project.

2. Then, import the statement below into the accordionwebpart.tsx file.

import { Accordion } from "@pnp/spfx-controls-react/lib/Accordion";

3. Now, within the render function, add the below sampleItems array, which is a collection of objects containing the properties: Question, Answer, Language.

const sampleItems = [
  {
    Question: "What is an accordion in web development?",
    Answer: "An accordion is a UI component that allows users to expand and collapse sections of related content.",
    Langue: { Nom: "English" }
  },
  {
    Question: "What is React?",
    Answer: "React is a JavaScript library for building user interfaces.",
    Langue: { Nom: "English" }
  },
  {
    Question: "How does the accordion work?",
    Answer: "It toggles visibility of content panels. Clicking a header expands or collapses its associated content.",
    Langue: { Nom: "English" }
  }
];

4. Then, update the’ return() ‘ within the’ render() ‘ function in the .tsx file.

return (
      <section className={`${styles.samplereactweb}`}>
        <div>
          <h1>Sample Accordion Example</h1>
        </div>
        <div>
        {
           sampleItems.map((item, index) => (
            <Accordion title={item.Question} defaultCollapsed={true} className={"itemCell"} key={index} collapsedIcon={"ChevronRightMed"} expandedIcon={"ChevronDownMed"}>
             <div className={"itemContent"}>
             <div className={"itemResponse"}>{item.Answer}</div>
             <div className={"itemIndex"}>{`Langue :  ${item.Langue.Nom}`}</div>
             </div>
           </Accordion>
           ))
        }
        </div>
      </section>
    );

Here,

• sampleItems.map((item, index) => (…) = We are applying the map function for each item present in the sampleItems array.
• map() function will create an index for each object [item] and also the accordion control.
• {item.Question}, {item.Answer} = Used to fetch the question & answer from the item.
• Accordion control has the following properties:

5. Here is the final code. You can add some more questions and answers to the sample items array if you want.

import * as React from 'react';
import styles from './Samplereactweb.module.scss';
import type { ISamplereactwebProps } from './ISamplereactwebProps';
import { Accordion } from "@pnp/spfx-controls-react/lib/Accordion";
export default class Samplereactweb extends React.Component<ISamplereactwebProps> {
public render(): React.ReactElement<ISamplereactwebProps> {
// Sample data for demonstration
const sampleItems = [
  {
    Question: "What is an accordion in web development?",
    Answer: "An accordion is a UI component that allows users to expand and collapse sections of related content.",
    Langue: { Nom: "English" }
  },
  {
    Question: "What is React?",
    Answer: "React is a JavaScript library for building user interfaces.",
    Langue: { Nom: "English" }
  },
  {
    Question: "How does the accordion work?",
    Answer: "It toggles visibility of content panels. Clicking a header expands or collapses its associated content.",
    Langue: { Nom: "English" }
  }
];
 return (
      <section className={`${styles.samplereactweb}`}>
        <div>
          <h1>Sample Accordion Example</h1>
        </div>
        <div>
        {
           sampleItems.map((item, index) => (
            <Accordion title={item.Question} defaultCollapsed={true} className={"itemCell"} key={index} collapsedIcon={"ChevronRightMed"} expandedIcon={"ChevronDownMed"}>
             <div className={"itemContent"}>
             <div className={"itemResponse"}>{item.Answer}</div>
             <div className={"itemIndex"}>{`Langue :  ${item.Langue.Nom}`}</div>
             </div>
           </Accordion>
           ))
        }
        </div>
      </section>
    );
  }
}

6. Then, save the changes and run the command below to test it in the local workbench.

gulp serve

7. The workbench URL will be like below:

https://<tenantname>.sharepoint.com/sites/RetailManagementSite/_layouts/15/workbench.aspx

Then, like in the example above, you can see the sample SPFx accordion example.

Deploy SPFx Sample Accordion Webpart

To deploy the SPFx client-side web part to your SharePoint Online app catalog site or site collection app catalog, run the commands below, which will create the .sppkg file under the SharePoint folder.

gulp bundle --ship

gulp package-solution --ship

Download and Use the Solution

If you want to download and use the solution, then first download the SPFx solution from the link below.

• Download SPFx Sample Accordion Webpart

I hope you understand how to create a SPFx accordion webpart with sample data. In this article, I also explained how to import the accordion control from the @pnp/spfx-controls-react library, including its properties and usage. Follow this article if you are also trying to create an accordion SPFx webpart.

Also, you may like:

• How to Use Microsoft Graph API in SPFx Web Parts
• Bind SharePoint List Items to SPFx fluent ui react dropdown example
• Display Current User Name in SPFx Client Side Web Part
• SPFx – Bind dropdown list from a SharePoint list using PnP
• SharePoint online spfx script editor web part

Bijay Kumar

After working for more than 18 years in Microsoft technologies like SharePoint, Microsoft 365, and Power Platform (Power Apps, Power Automate, and Power BI), I thought will share my SharePoint expertise knowledge with the world. Our audiences are from the United States, Canada, the United Kingdom, Australia, New Zealand, etc. For my expertise knowledge and SharePoint tutorials, Microsoft has been awarded a Microsoft SharePoint MVP (12 times). I have also worked in companies like HP, TCS, KPIT, etc.