How to create expand and collapse FAQ on SharePoint Communication Site (Modern Site)?

[bbsin]

hi,

Can anyone share the steps to create the expandable / collapse to create FAQ like the following when you click it appear and can hide?  

I am not a developer so I don't understand any coding.  I need to put it into the side on my main site.

Please provide step by step instructions to create it.  tks

I need the sample above, my site is something like this..

the answers or descriptions are quite long

Thanks

[#2]

Hi @bbsin,

There is no "out of the box" web part available for this functionality. You can use the "React Accordion plugin with SPFx" from the SharePoint GitHub repository to get the functionality you require. The deployment instructions are listed in the README.md file. 

I hope this helps.

Norm

[#3]

sininv1 . <sininv@gmail.com> 10:00 PM (2 minutes ago) to Microsoft Hi Norm, thank you for your reply. I don't understand how to put it into the site.. Sorry I am cannot under the technical and coding side. 

my site is example...https://xxx.sharepoint.com/sites/name of the site/Lists/TEST%20Q/AllItems.aspx 

Do I put the code inside the box show below?  Not sure what code to put.

can you advice give more details steps. tks

[#4]

You will need help from a developer to deploy the solution to your tenant.

[#5]

Hi @Norman Young 

Ok will check with the person.  

Thanks again. 

Cheers, 

[#6]

I found some similar question/resolutions for this probably as new technologies and resultant solutions emerged:

How to create an accordion-style FAQ in SharePoint - SharePoint Maven

Create FAQ's As Sharepoint Modern Page Used In Sharepoint Intranet Site (c-sharpcorner.com)

New SharePoint view formatting samples now available - Microsoft Tech Community

this last link/url refers us to and states:

Each sample includes SharePoint site scripts, so you can quickly create the SharePoint lists and views that support the samples and try them out.   And formatted views also work great inside SharePoint web parts or tabs on Microsoft Teams.

You can browse and download all these and more on the Microsoft 365 Resource Center.

@bbsin