SOLVED

Collapsible and Expandible section in Modern Page Sharepoint online

%3CLINGO-SUB%20id%3D%22lingo-sub-2149842%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-2149842%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%3BI%20don't%20know%20whether%20this%20could%20be%20done%20with%20SPFx%20(%3CEM%3Ewe%20can't%20use%20it%20at%20my%20company%20so%20I%20have%20no%20knowledge%20of%20it%3C%2FEM%3E)%20but%20there's%20no%20way%20of%20doing%20this%20out-of-the-box%20with%20a%20modern%20SharePoint%20page.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3ERob%3CBR%20%2F%3ELos%20Gallardos%3CBR%20%2F%3E%3CFONT%20size%3D%222%22%20color%3D%22%23006400%22%3EMicrosoft%20Power%20Automate%20Community%20Super%20User%3C%2FFONT%3E%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-2149866%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-2149866%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F174092%22%20target%3D%22_blank%22%3E%40RobElliott%3C%2FA%3E%26nbsp%3BCan%20you%20share%20example%20of%20SPX%3F%20Where%20can%20I%20get%20the%20code%3F%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-2149927%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-2149927%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%3BNo.%20As%20I%20said%20in%20my%20previous%20post%2C%20we%20are%20not%20allowed%20to%20use%20it%20at%20my%20company%20so%20I%20have%20no%20knowledge%20of%20it.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3ERob%3CBR%20%2F%3ELos%20Gallardos%3CBR%20%2F%3E%3CFONT%20size%3D%222%22%20color%3D%22%23006400%22%3EMicrosoft%20Power%20Automate%20Community%20Super%20User%3C%2FFONT%3E%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-2150067%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-2150067%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F174092%22%20target%3D%22_blank%22%3E%40RobElliott%3C%2FA%3E%26nbsp%3BUnderstand%2C%20thought%20you%20might%20have%20access%20to%20the%20information.%20Thank%20you%20so%20much.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-2151134%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-2151134%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%20modern%20pages%20in%20SharePoint%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%3CLINGO-SUB%20id%3D%22lingo-sub-2165883%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-2165883%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F373269%22%20target%3D%22_blank%22%3E%40ganeshsanap%3C%2FA%3E%26nbsp%3BThank%20you%20so%20much%20for%20sharing%20the%20information.%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-2506789%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-2506789%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%3EFinally%2C%20collapsible%2Fexpandable%20sections%20will%20be%20released%20to%20modern%20pages%20in%20SharePoint%20online%20this%20month.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EYou%20can%20find%20short%20overview%20%26amp%3B%20release%20timeline%20of%20this%20feature%20at%3A%26nbsp%3B%3CA%20title%3D%22SharePoint%3A%20Collapsible%20sections%20on%20modern%20pages%22%20href%3D%22https%3A%2F%2Fganeshsanapblogs.wordpress.com%2F2021%2F07%2F01%2Fsharepoint-collapsible-sections-on-modern-pages%2F%22%20target%3D%22_blank%22%20rel%3D%22noopener%20nofollow%20noreferrer%22%3ESharePoint%3A%20Collapsible%20sections%20on%20modern%20pages%3C%2FA%3E%26nbsp%3B%3C%2FP%3E%3CHR%20%2F%3E%3CP%3EPlease%20click%26nbsp%3B%3CSTRONG%3EMark%20as%20Best%20Response%3C%2FSTRONG%3E%26nbsp%3B%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%3CLINGO-SUB%20id%3D%22lingo-sub-2611616%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-2611616%22%20slang%3D%22en-US%22%3Eis%20this%20not%20accessible%20to%20the%20owners%20or%20members%20of%20a%20site%2Fpage.%20I%20am%20an%20admin%20tenant%20and%20can%20see%20but%20not%20others%20with%20high%20level%20of%20permission%20for%20their%20sites.%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-2611622%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-2611622%22%20slang%3D%22en-US%22%3EAlso%20when%20I%20make%20a%20page%20full%20of%20these%20section%20options%2C%20the%20end%20user%20also%20doesn't%20see%20it%20in%20this%20form.%20so%20the%20feature%20doesn't%20work.%20Any%20ideas%3F%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-2612008%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-2612008%22%20slang%3D%22en-US%22%3EThank%20you%20Ganesh%20!%20This%20is%20very%20helful.%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-2613781%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-2613781%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F807799%22%20target%3D%22_blank%22%3E%40hportCL%3C%2FA%3E%26nbsp%3BThis%20feature%20is%20still%20rolling%20out%20%26amp%3B%20not%20yet%20completely%20rolled%20out%20to%20all%20SharePoint%20tenants%20(standard%20release).%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EAlso%2C%20you%20might%20have%20enabled%20%3CSTRONG%3Etargeted%20release%3C%2FSTRONG%3E%26nbsp%3Bfrom%20admin%20center%20for%20yourself%20only.%20If%20this%20is%20the%20case%2C%20enable%26nbsp%3B%3CSTRONG%3ETargeted%20release%20for%20everyone%3C%2FSTRONG%3E%20OR%20wait%20until%20it%20is%20rolled%20out%20to%20all%20standard%20release%20organizations%2Fusers.%3C%2FP%3E%3CHR%20%2F%3E%3CP%3EPlease%20consider%20giving%20a%26nbsp%3B%3CSTRONG%3ELike%26nbsp%3B%3C%2FSTRONG%3Eif%20my%20post%20helped%20you%20in%20any%20way.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-2613796%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-2613796%22%20slang%3D%22en-US%22%3E%3CP%3EYou%20are%20welcome%26nbsp%3B%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%3CHR%20%2F%3E%3CP%3EPlease%20consider%20giving%20a%26nbsp%3B%3CSTRONG%3ELike%26nbsp%3B%3C%2FSTRONG%3Eif%20my%20post%20helped%20you%20in%20any%20way.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-2653885%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-2653885%22%20slang%3D%22en-US%22%3E%3CP%3EYep%2C%20my%20targeted%20release%20users%20see%20it%2C%20but%20standard%20users%20just%20see%20the%20content%20within%20the%20sections%20as%20before.%20Though%20the%20roadmap%20says%20%22release%22%20is%20July%20so%20I%20guess%20that's%20wrong....%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-2661855%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-2661855%22%20slang%3D%22en-US%22%3EDo%20you%20know%20when%20this%20will%20be%20fully%20rolled%20out%3F%20There%20is%20no%20information%20on%20the%20roadmap%20and%20I%20would%20really%20like%20to%20implement%20this%20in%20my%20tenant.%20We%20are%20fully%20redesigning%20our%20Intranet%20and%20this%20would%20be%20a%20perfect%20feature%20to%20have.%20Thanks%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-2776827%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-2776827%22%20slang%3D%22en-US%22%3E%3CP%3ESame%20issue%20-%20really%20frustrating%20after%20designing%20UI%20only%20to%20discover%20they%20cant%20view%20it%20properly.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-2779707%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-2779707%22%20slang%3D%22en-US%22%3E%3CP%3EAlmost%20October%20and%20this%20still%20hasn't%20been%20released%20(GA).%20What%20is%20going%20on%3F%20What's%20the%20point%20of%20the%20roadmap%20if%20it's%20completely%20inaccurate%3F%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-2780739%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-2780739%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F221756%22%20target%3D%22_blank%22%3E%40matt%20howell%3C%2FA%3E%2C%20Microsoft%20is%20currently%20working%20on%20the%20feedbacks%2Fissues%20received%20during%20targeted%20release%20of%20this%20feature.%3C%2FP%3E%3CP%3ECurrently%2C%20it%20is%20expected%20to%20reach%20General%20Availability%20with%20all%20fixes%20in%20place%20by%20the%20end%20of%20September%202021%20(which%20might%20get%20delayed%20as%20well%20if%20all%20the%20fixes%20are%20not%20completed%20yet).%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EYou%20can%20find%20this%20information%20in%20below%20blog%20as%20well.%20I%20am%20regularly%20updating%20the%20blog%20as%20I%20receive%20any%20latest%20information%20about%20this%20feature%3A%26nbsp%3B%3CA%20title%3D%22SharePoint%3A%20Collapsible%20sections%20on%20modern%20pages%22%20href%3D%22https%3A%2F%2Fganeshsanapblogs.wordpress.com%2F2021%2F07%2F01%2Fsharepoint-collapsible-sections-on-modern-pages%2F%22%20target%3D%22_blank%22%20rel%3D%22noopener%20nofollow%20noreferrer%22%3ESharePoint%3A%20Collapsible%20sections%20on%20modern%20pages%3C%2FA%3E%26nbsp%3B%3C%2FP%3E%3CHR%20%2F%3E%3CP%3EPlease%20consider%20giving%20a%26nbsp%3B%3CSTRONG%3ELike%26nbsp%3B%3C%2FSTRONG%3Eif%20my%20post%20helped%20you%20in%20any%20way.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-2783722%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-2783722%22%20slang%3D%22en-US%22%3E%3CP%3EVery%20helpful%2C%20thank%20you.%20It%20does%20rather%20beg%20the%20question%20though%20why%20Msft%20wasn't%20able%20to%20bake%20in%20enough%20time%20to%20review%20feedback%2C%20as%20all%20competent%20developers%20do.%20It%20doesn't%20sound%20like%20the%20reasons%20they%20give%20aren't%20pretty%20predictable%20and%20almost%20expected.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-2149556%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-2149556%22%20slang%3D%22en-US%22%3E%3CP%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%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-LABS%20id%3D%22lingo-labs-2149556%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-2982082%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-2982082%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%3EThis%20has%20started%20rolling%20out%2C%20just%20noticed%20that%20our%20tenant%20has%20it%2C%26nbsp%3B%3C%2FP%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Fm365admin.handsontek.net%2Fsharepoint-collapsible-sections%2F%22%20target%3D%22_blank%22%20rel%3D%22nofollow%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fm365admin.handsontek.net%2Fsharepoint-collapsible-sections%2F%3C%2FA%3E%3C%2FP%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Fwww.microsoft.com%2Fen-us%2Fmicrosoft-365%2Froadmap%3Ffilters%3D%26amp%3Bsearchterms%3Dcollapsible%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3Ehttps%3A%2F%2Fwww.microsoft.com%2Fen-us%2Fmicrosoft-365%2Froadmap%3Ffilters%3D%26amp%3Bsearchterms%3Dcollapsible%3C%2FA%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-2983912%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-2983912%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F173033%22%20target%3D%22_blank%22%3E%40Roberta%20Freese%3C%2FA%3E%26nbsp%3BYes%2C%20collapsible%20sections%20are%20rolled%20out%20globally%20now.%20Microsoft%20also%20added%26nbsp%3BAnchor%20links%20on%20collapsible%20section%20headings%20now%2C%20like%3A%26nbsp%3B%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-center%22%20image-alt%3D%22anchored-link-on-collapsible-section-heading-on-modern-page.png%22%20style%3D%22width%3A%20501px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F328126iF3CA4824BCD7CCB7%2Fimage-size%2Flarge%3Fv%3Dv2%26amp%3Bpx%3D999%22%20role%3D%22button%22%20title%3D%22anchored-link-on-collapsible-section-heading-on-modern-page.png%22%20alt%3D%22anchored-link-on-collapsible-section-heading-on-modern-page.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3BCheck%20more%20details%20in%20this%20article%3A%26nbsp%3B%3CA%20title%3D%22SharePoint%3A%20Collapsible%20sections%20on%20modern%20pages%22%20href%3D%22https%3A%2F%2Fganeshsanapblogs.wordpress.com%2F2021%2F07%2F01%2Fsharepoint-collapsible-sections-on-modern-pages%2F%22%20target%3D%22_blank%22%20rel%3D%22noopener%20nofollow%20noreferrer%22%3ESharePoint%3A%20Collapsible%20sections%20on%20modern%20pages%3C%2FA%3E%26nbsp%3B%3C%2FP%3E%3CHR%20%2F%3E%3CP%3EPlease%20consider%20giving%20a%26nbsp%3B%3CSTRONG%3ELike%26nbsp%3B%3C%2FSTRONG%3Eif%20my%20post%20helped%20you%20in%20any%20way.%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. 

20 Replies

@apatel3 I don't know whether this could be done with SPFx (we can't use it at my company so I have no knowledge of it) but there's no way of doing this out-of-the-box with a modern SharePoint page.

 

Rob
Los Gallardos
Microsoft Power Automate Community Super User

@RobElliott Can you share example of SPX? Where can I get the code?

@apatel3 No. As I said in my previous post, we are not allowed to use it at my company so I have no knowledge of it.

 

Rob
Los Gallardos
Microsoft Power Automate Community Super User

@RobElliott Understand, thought you might have access to the information. Thank you so much.

@apatel3 

 

Collapsible sections on modern pages in SharePoint 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 for sharing the information. 

best response confirmed by apatel3 (Occasional Contributor)
Solution

@apatel3 

Finally, collapsible/expandable sections will be released to modern pages in SharePoint online this month.

 

You can find short overview & release timeline of this feature at: SharePoint: Collapsible sections on modern pages 


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.

is this not accessible to the owners or members of a site/page. I am an admin tenant and can see but not others with high level of permission for their sites.
Also when I make a page full of these section options, the end user also doesn't see it in this form. so the feature doesn't work. Any ideas?
Thank you Ganesh ! This is very helful.

@hportCL This feature is still rolling out & not yet completely rolled out to all SharePoint tenants (standard release).

 

Also, you might have enabled targeted release from admin center for yourself only. If this is the case, enable Targeted release for everyone OR wait until it is rolled out to all standard release organizations/users.


Please consider giving a Like if my post helped you in any way.

You are welcome @apatel3


Please consider giving a Like if my post helped you in any way.

Yep, my targeted release users see it, but standard users just see the content within the sections as before. Though the roadmap says "release" is July so I guess that's wrong....

Do you know when this will be fully rolled out? There is no information on the roadmap and I would really like to implement this in my tenant. We are fully redesigning our Intranet and this would be a perfect feature to have. Thanks

Same issue as Matt Howell - really frustrating after designing UI only to discover most of the organisation cant view it properly.

Almost October and this still hasn't been released (GA). What is going on? What's the point of the roadmap if it's completely inaccurate?

@matt howell, Microsoft is currently working on the feedbacks/issues received during targeted release of this feature.

Currently, it is expected to reach General Availability with all fixes in place by the end of September 2021 (which might get delayed as well if all the fixes are not completed yet).

 

You can find this information in below blog as well. I am regularly updating the blog as I receive any latest information about this feature: SharePoint: Collapsible sections on modern pages 


Please consider giving a Like if my post helped you in any way.

Very helpful, thank you. It does rather beg the question though why Msft wasn't able to bake in enough time to review feedback, as all competent developers do. It doesn't sound like the reasons they give aren't pretty predictable and almost expected.