Collapsible and Expandible section in Modern Page Sharepoint online

%3CLINGO-SUB%20id%3D%22lingo-sub-2149853%22%20slang%3D%22en-US%22%3ECollapsible%20and%20Expandible%20section%20in%20Modern%20Page%20Sharepoint%20online%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-2149853%22%20slang%3D%22en-US%22%3E%3CP%3E%3CSPAN%3EOur%20users%20has%20long%20pages%20of%20information%20with%20different%20topic%20similiar%20to%20FAQ's%20with%20table%20sections.%20It's%20not%20user%20friendly%20to%20scroll%20down%20to%20the%20topic.%20I%20want%20to%20create%20collapsible%2Fexpandible%20section%20to%20modern%20page%20in%20sharepoint%20site.%20Please%20help%20me%20or%20share%20your%20suggestion.%26nbsp%3B%3C%2FSPAN%3E%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-2151174%22%20slang%3D%22en-US%22%3ERe%3A%20Collapsible%20and%20Expandible%20section%20in%20Modern%20Page%20Sharepoint%20online%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-2151174%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F605313%22%20target%3D%22_blank%22%3E%40apatel3%3C%2FA%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSPAN%3ECollapsible%20sections%20on%20SharePoint%20modern%20pages%20are%20coming%20soon.%20Currently%20it%20is%20in%20development%20phase.%20You%20can%20track%20it's%20progress%20at%3A%26nbsp%3B%3CA%20title%3D%22Microsoft%20365%20Roadmap%22%20href%3D%22https%3A%2F%2Fwww.microsoft.com%2Fen-us%2Fmicrosoft-365%2Froadmap%3F%26amp%3Bfilters%3D%26amp%3Bsearchterms%3D67147%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3EMicrosoft%20365%20Roadmap%3C%2FA%3E%26nbsp%3B%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSPAN%3EI%20will%20suggest%20you%20to%20wait%20for%20this%20feature%20to%20get%20released%20(as%20this%20will%20be%20out%20of%20the%20box%20solution).%20But%2C%20in%20the%20mean%20time%20if%20you%20want%20to%20get%20started%20with%20SPFx%20web%20part%20then%20have%20a%20look%20at%20below%20SPFx%20sample%3A%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%3CSPAN%3E%3CA%20title%3D%22Using%20React%20Accordion%20plugin%20with%20SPFx%22%20href%3D%22https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmaster%2Fsamples%2Freact-accordion%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3EUsing%20React%20Accordion%20plugin%20with%20SPFx%3C%2FA%3E%26nbsp%3B%26nbsp%3B%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSPAN%3EYou%20can%20download%20the%20code%20from%20this%20GitHub%26nbsp%3Brepo%20and%20use%20it%20as%20it%20is%20if%20this%20satisfies%20your%20requirements%20or%20you%20can%20enhance%20it%20after%20downloading%20as%20per%20your%20requirements.%3C%2FSPAN%3E%3C%2FP%3E%3CHR%20%2F%3E%3CP%3EPlease%20click%20%3CSTRONG%3EMark%20as%20Best%20Response%3C%2FSTRONG%3E%20%26amp%3B%20%3CSTRONG%3ELike%3C%2FSTRONG%3E%20if%20my%20post%20helped%20you%20to%20solve%20your%20issue.%20This%20will%20help%20others%20to%20find%20the%20correct%20solution%20easily.%20It%20also%20closes%20the%20item.%20If%20the%20post%20was%20useful%20in%20other%20ways%2C%20please%20consider%20giving%20it%20%3CSTRONG%3ELike%3C%2FSTRONG%3E.%3C%2FP%3E%3C%2FLINGO-BODY%3E
Occasional Contributor

Our users has long pages of information with different topic similiar to FAQ's with table sections. It's not user friendly to scroll down to the topic. I want to create collapsible/expandible section to modern page in sharepoint site. Please help me or share your suggestion. 

2 Replies

@apatel3 

 

Collapsible sections on SharePoint modern pages are coming soon. Currently it is in development phase. You can track it's progress at: Microsoft 365 Roadmap 

 

I will suggest you to wait for this feature to get released (as this will be out of the box solution). But, in the mean time if you want to get started with SPFx web part then have a look at below SPFx sample:

Using React Accordion plugin with SPFx  

 

You can download the code from this GitHub repo and use it as it is if this satisfies your requirements or you can enhance it after downloading as per your requirements.


Please click Mark as Best Response & Like if my post helped you to solve your issue. This will help others to find the correct solution easily. It also closes the item. If the post was useful in other ways, please consider giving it Like.

@ganeshsanap Thank you so much. I will try it.