Home

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

%3CLINGO-SUB%20id%3D%22lingo-sub-1301930%22%20slang%3D%22en-US%22%3EHow%20to%20create%20expand%20and%20collapse%20FAQ%20on%20SharePoint%20Communication%20Site%20(Modern%20Site)%3F%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1301930%22%20slang%3D%22en-US%22%3E%3CP%3Ehi%2C%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3ECan%20anyone%20share%20the%20steps%20to%20create%20the%20expandable%20%2F%20collapse%20to%20create%20FAQ%20like%20the%20following%20when%20you%20click%20it%20appear%20and%20can%20hide%3F%26nbsp%3B%26nbsp%3B%3C%2FP%3E%3CP%3EI%20am%20not%20a%20developer%20so%20I%20don't%20understand%20any%20coding.%26nbsp%3B%20I%20need%20to%20put%20it%20into%20the%20side%20on%20my%20main%20site.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EPlease%20provide%20step%20by%20step%20instructions%20to%20create%20it.%26nbsp%3B%20tks%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20image-alt%3D%22bbsin_0-1586758344424.png%22%20style%3D%22width%3A%20400px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F183861iD3809668B5343A2A%2Fimage-size%2Fmedium%3Fv%3D1.0%26amp%3Bpx%3D400%22%20title%3D%22bbsin_0-1586758344424.png%22%20alt%3D%22bbsin_0-1586758344424.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI%20need%20the%20sample%20above%2C%20my%20site%20is%20something%20like%20this..%3C%2FP%3E%3CP%3Ethe%20answers%20or%20descriptions%20are%20quite%20long%3C%2FP%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20image-alt%3D%22bbsin_0-1586764839397.png%22%20style%3D%22width%3A%20400px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F183894i7FE527D471596C66%2Fimage-size%2Fmedium%3Fv%3D1.0%26amp%3Bpx%3D400%22%20title%3D%22bbsin_0-1586764839397.png%22%20alt%3D%22bbsin_0-1586764839397.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EThanks%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-LABS%20id%3D%22lingo-labs-1301930%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3ESharePoint%20Online%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1302425%22%20slang%3D%22en-US%22%3ERe%3A%20How%20to%20create%20expand%20and%20collapse%20FAQ%20on%20SharePoint%20Communication%20Site%20(Modern%20Site)%3F%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1302425%22%20slang%3D%22en-US%22%3E%3CP%3EHi%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F612792%22%20target%3D%22_blank%22%3E%40bbsin%3C%2FA%3E%2C%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EThere%20is%20no%20%22out%20of%20the%20box%22%20web%20part%20available%20for%20this%20functionality.%20You%20can%20use%20the%20%22%3CA%20href%3D%22https%3A%2F%2Fgithub.com%2FSharePoint%2Fsp-dev-fx-webparts%2Ftree%2Fmaster%2Fsamples%2Freact-accordion%22%20target%3D%22_self%22%20rel%3D%22noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%22%3EReact%20Accordion%20plugin%20with%20SPFx%3C%2FA%3E%22%20from%20the%20SharePoint%20GitHub%20repository%20to%20get%20the%20functionality%20you%20require.%20The%20deployment%20instructions%20are%20listed%20in%20the%20README.md%20file.%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EI%20hope%20this%20helps.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3ENorm%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1302620%22%20slang%3D%22en-US%22%3ERe%3A%20How%20to%20create%20expand%20and%20collapse%20FAQ%20on%20SharePoint%20Communication%20Site%20(Modern%20Site)%3F%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1302620%22%20slang%3D%22en-US%22%3E%3CP%3Esininv1%20.%20%3CSININV%3E%2010%3A00%20PM%20(2%20minutes%20ago)%20to%20Microsoft%20Hi%20Norm%2C%20thank%20you%20for%20your%20reply.%20I%20don't%20understand%20how%20to%20put%20it%20into%20the%20site..%20Sorry%20I%20am%20cannot%20under%20the%20technical%20and%20coding%20side.%26nbsp%3B%3C%2FSININV%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3Emy%20site%20is%20example...%3CA%20href%3D%22https%3A%2F%2Fxxx.sharepoint.com%2Fsites%2Fname%22%20target%3D%22_blank%22%20rel%3D%22nofollow%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fxxx.sharepoint.com%2Fsites%2Fname%3C%2FA%3E%20of%20the%20site%2FLists%2FTEST%2520Q%2FAllItems.aspx%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EDo%20I%20put%20the%20code%20inside%20the%20box%20show%20below%3F%26nbsp%3B%20Not%20sure%20what%20code%20to%20put.%3C%2FP%3E%3CP%3Ecan%20you%20advice%20give%20more%20details%20steps.%20tks%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20image-alt%3D%22bbsin_0-1586786691940.png%22%20style%3D%22width%3A%20400px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F183940i4544C8F5A8D3C366%2Fimage-size%2Fmedium%3Fv%3D1.0%26amp%3Bpx%3D400%22%20title%3D%22bbsin_0-1586786691940.png%22%20alt%3D%22bbsin_0-1586786691940.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1302626%22%20slang%3D%22en-US%22%3ERe%3A%20How%20to%20create%20expand%20and%20collapse%20FAQ%20on%20SharePoint%20Communication%20Site%20(Modern%20Site)%3F%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1302626%22%20slang%3D%22en-US%22%3E%3CP%3EYou%20will%20need%20help%20from%20a%20developer%20to%20deploy%20the%20solution%20to%20your%20tenant.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1302645%22%20slang%3D%22en-US%22%3ERe%3A%20How%20to%20create%20expand%20and%20collapse%20FAQ%20on%20SharePoint%20Communication%20Site%20(Modern%20Site)%3F%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1302645%22%20slang%3D%22en-US%22%3E%3CP%3EHi%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F111382%22%20target%3D%22_blank%22%3E%40Norman%20Young%3C%2FA%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EOk%20will%20check%20with%20the%20person.%26nbsp%3B%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EThanks%20again.%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3ECheers%2C%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E
Highlighted
Occasional Contributor

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

 

bbsin_0-1586758344424.png

 

 

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

the answers or descriptions are quite long

bbsin_0-1586764839397.png

 

 

Thanks

4 Replies
Highlighted

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

Highlighted

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

 

bbsin_0-1586786691940.png

 

Highlighted

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

Highlighted

Hi @Norman Young 

 

Ok will check with the person.  

 

Thanks again. 

 

Cheers,