Accordion menus and widgets are widely used on websites to manage a large amount of content and navigation lists. In this article, we will see step by step implementation of the accordion with SharePoint list.
In this example, we will create a list called “Accordion” and in the list, we will create a Description field (it will be multiple lines of text -Rich text) and will use Title and Description field to expand and collapse.
We will use PnPJs to get list items and then will render them in the accordion form.
At the end, our output will be like this,
Let’s see the step-by-step implementation.


  • Create a list with Title and Description fields as mentioned above.
  • Open a command prompt
  • Move to the path where you want to create a project
  • Create a project directory using:
Move to the above-created directory using:
Now execute the below command to create an SPFx solution:
It will ask some questions, as shown below,
After a successful installation, we can open a project in any source code tool. Here, I am using the VS code, so I will execute the command:
Now we will install pnpjs and pnp-spfx-controls-react as shown below:
Now go to the src > webparts > webpart > components > I{webpartname}Props.ts file,

Create a file I{webpartname}State.ts inside src > webparts > webpart > components and create state interface as below,
Create a Service folder inside src and then in this folder create a file called SPService.ts. And in this file, we will create a service to get list items as below,
Here list name will come from the webpart property pane.
Now move to the {webpartname}Webpart.ts. And create a list name property in property pane configuration and pass context and list name property as below,
Move to the {webpartname}.tsx file and then bind the service using current context and the call service for get list items and set values in the state and render it in accordion control as below,
Now serve the application using the below command,
Now test the webpart in SharePoint-SiteURL + /_layouts/15/workbench.aspx.