ACCORDION WEB PART

%3CLINGO-SUB%20id%3D%22lingo-sub-1207544%22%20slang%3D%22en-US%22%3ERe%3A%20ACCORDION%20WEB%20PART%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1207544%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F523213%22%20target%3D%22_blank%22%3E%40chudson002%3C%2FA%3E%26nbsp%3Bunfortunately%20(as%20I%20could%20use%20this%20for%20an%20FAQ%20page%20as%20I%20did%20on%20SP2010)%20there%20is%20no%20way%20to%20do%20this%20in%20the%20modern%20experience%20yet.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3ERob%3CBR%20%2F%3ELos%20Gallardos%3C%2FP%3E%3CP%3EMicrosoft%20Power%20Automate%20Community%20Super%20User%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1207707%22%20slang%3D%22en-US%22%3ERe%3A%20ACCORDION%20WEB%20PART%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1207707%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F523213%22%20target%3D%22_blank%22%3E%40chudson002%3C%2FA%3E%26nbsp%3BHave%20you%20seen%20this%20option%3F%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Fdocs.microsoft.com%2Fen-us%2Fsharepoint%2Fdev%2Fspfx%2Fweb-parts%2Fget-started%2Fadd-jqueryui-accordion-to-web-part%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3Ehttps%3A%2F%2Fdocs.microsoft.com%2Fen-us%2Fsharepoint%2Fdev%2Fspfx%2Fweb-parts%2Fget-started%2Fadd-jqueryui-accordion-to-web-part%3C%2FA%3E%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1207713%22%20slang%3D%22en-US%22%3ERE%3A%20ACCORDION%20WEB%20PART%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1207713%22%20slang%3D%22en-US%22%3EOK.%20I'll%20just%20have%20to%20use%20SP2013%20and%20link%20to%20the%20accordion%20view%20there.%20Thanks!%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1207719%22%20slang%3D%22en-US%22%3ERe%3A%20ACCORDION%20WEB%20PART%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1207719%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F381793%22%20target%3D%22_blank%22%3E%40eemancini%3C%2FA%3E%26nbsp%3Bit's%20not%20exactly%20out-of-the-box%20is%20it%2C%20and%20many%20companies%20(mine%20being%20one)%20don't%20allow%20SPFx.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3ERob%3CBR%20%2F%3ELos%20Gallardos%3C%2FP%3E%3CP%3EMicrosoft%20Power%20Automate%20Community%20Super%20User%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1207734%22%20slang%3D%22en-US%22%3ERe%3A%20ACCORDION%20WEB%20PART%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1207734%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%40Rob%20Elliott%3C%2FA%3E%26nbsp%3Bdefinitely%20not%20OOTB%20%3A)%3C%2Fimg%3E%20The%20original%20post%20mentioned%20script%20and%20CSS%20so%20seemed%20worth%20a%20mention.%20I%20have%20run%20into%20this%20request%20a%20lot%20and%20in%20most%20use%20cases%20a%20better%20information%20architecture%20was%20able%20to%20serve%20the%20content%20well%20without%20the%20expand%2Fcollapse%20capability.%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F523213%22%20target%3D%22_blank%22%3E%40chudson002%3C%2FA%3E%26nbsp%3Bif%20you%20have%20more%20to%20share%20around%20the%20use%20case%20we%20might%20have%20alternate%20recommendations%20for%20you.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3ECheers%2C%3CBR%20%2F%3EEmily%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1207536%22%20slang%3D%22en-US%22%3EACCORDION%20WEB%20PART%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1207536%22%20slang%3D%22en-US%22%3E%3CP%3EHello%2C%3C%2FP%3E%3CP%3EI%20am%20using%20modern%20pages%20and%20want%20to%20add%20an%20accordion%20view.%20I%20have%20looked%20at%20a%20few%20YouTube%20videos%20and%20it%20is%20so%26nbsp%3Bmuch%20more%20complicated.%26nbsp%3B%20Created%20the%20accordion%20on%20SP2013%20with%20a%20simple%20script%20and%20CSS.%26nbsp%3BDoes%20anyone%20have%20a%20solution%3F%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-1207536%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-2560546%22%20slang%3D%22en-US%22%3ERe%3A%20ACCORDION%20WEB%20PART%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-2560546%22%20slang%3D%22en-US%22%3E%3CP%3EApparently%20it%20is%20coming%20soon%26nbsp%3B%3CA%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%22nofollow%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fganeshsanapblogs.wordpress.com%2F2021%2F07%2F01%2Fsharepoint-collapsible-sections-on-modern-pages%2F%3C%2FA%3E%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-2967091%22%20slang%3D%22en-US%22%3ERe%3A%20ACCORDION%20WEB%20PART%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-2967091%22%20slang%3D%22en-US%22%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F523213%22%20target%3D%22_blank%22%3E%40chudson002%3C%2FA%3E%20you%20now%20have%20collapsible%20sections%20generally%20available!%20%3CA%20href%3D%22https%3A%2F%2Fwww.microsoft.com%2Fen-us%2Fmicrosoft-365%2Froadmap%3Ffilters%3D%26amp%3Bsearchterms%3Dcollapsible%252Csections%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%252Csections%3C%2FA%3E%3CBR%20%2F%3E%3CBR%20%2F%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fsharepoint%2Fsharepoint-online-collapsible-sections-on-modern-pages%2Fm-p%2F2510198%22%20target%3D%22_blank%22%3Ehttps%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fsharepoint%2Fsharepoint-online-collapsible-sections-on-modern-pages%2Fm-p%2F2510198%3C%2FA%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-2967300%22%20slang%3D%22en-US%22%3ERe%3A%20ACCORDION%20WEB%20PART%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-2967300%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F381793%22%20target%3D%22_blank%22%3E%40Emily_Mancini%3C%2FA%3E%26nbsp%3BHi%2C%20thanks%20for%20the%20update.%20Is%20there%20an%20update%20when%20the%20size%20will%20revert%20to%20a%20smaller%20font%20and%20the%20anchor%2Fbookmarks%20will%20work%20properly%3F%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-2967524%22%20slang%3D%22en-US%22%3ERe%3A%20ACCORDION%20WEB%20PART%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-2967524%22%20slang%3D%22en-US%22%3EI%20haven%E2%80%99t%20seen%20any%20specific%20dates%20announced%20though%20I%20did%20see%20on%20Twitter%20that%20Microsoft%20is%20aware%20of%20the%20issue%20and%20actively%20working%20on%20it.%20I%E2%80%99ll%20let%20you%20know%20if%20I%20find%20out%20more!%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-2967590%22%20slang%3D%22en-US%22%3ERe%3A%20ACCORDION%20WEB%20PART%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-2967590%22%20slang%3D%22en-US%22%3EHi%20Emily%2C%20can%20you%20please%20copy%20the%20link%20to%20the%20Twitter%20thread%20here%20so%20I%20can%20follow%20it%3F%20I%20tried%20searching%20Twitter%20but%20couldn't%20see%20it.%20Many%20thanks%20again.%3CBR%20%2F%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-2967838%22%20slang%3D%22en-US%22%3ERe%3A%20ACCORDION%20WEB%20PART%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-2967838%22%20slang%3D%22en-US%22%3ELooks%20like%20I%20made%20a%20bit%20of%20an%20over%20promise%20based%20off%20my%20memory%2C%20my%20apologies%2C%20though%20I%20do%20see%20John%20Sanders%20is%20on%20the%20thread%20speaking%20to%20some%20aspects%20%3CA%20href%3D%22https%3A%2F%2Ftwitter.com%2Fgregoryzelfond%2Fstatus%2F1458767054136295430%3Fs%3D21%22%20target%3D%22_blank%22%20rel%3D%22nofollow%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Ftwitter.com%2Fgregoryzelfond%2Fstatus%2F1458767054136295430%3Fs%3D21%3C%2FA%3E%3C%2FLINGO-BODY%3E
Contributor

Hello,

I am using modern pages and want to add an accordion view. I have looked at a few YouTube videos and it is so much more complicated.  Created the accordion on SP2013 with a simple script and CSS. Does anyone have a solution?

 

Thanks!

15 Replies

@chudson002 unfortunately (as I could use this for an FAQ page as I did on SP2010) there is no way to do this in the modern experience yet.

 

Rob
Los Gallardos

Microsoft Power Automate Community Super User

OK. I'll just have to use SP2013 and link to the accordion view there. Thanks!

@Emily_Mancini it's not exactly out-of-the-box is it, and many companies (mine being one) don't allow SPFx.

 

Rob
Los Gallardos

Microsoft Power Automate Community Super User

@RobElliott definitely not OOTB :) The original post mentioned script and CSS so seemed worth a mention. I have run into this request a lot and in most use cases a better information architecture was able to serve the content well without the expand/collapse capability. 

 

@chudson002 if you have more to share around the use case we might have alternate recommendations for you.

 

Cheers,
Emily

@Emily_Mancini Hi, thanks for the update. Is there an update when the size will revert to a smaller font and the anchor/bookmarks will work properly? 

I haven’t seen any specific dates announced though I did see on Twitter that Microsoft is aware of the issue and actively working on it. I’ll let you know if I find out more!
Hi Emily, can you please copy the link to the Twitter thread here so I can follow it? I tried searching Twitter but couldn't see it. Many thanks again.
Looks like I made a bit of an over promise based off my memory, my apologies, though I do see John Sanders is on the thread speaking to some aspects https://twitter.com/gregoryzelfond/status/1458767054136295430?s=21
I'm having an issue today where I can't edit the accordion web part text anymore. I see the issue with copying the link has been fixed, has this affected the editing of the text?

@Monica2820 

I am able to reproduce this issue at my end. I am not able to change the section title of existing collapsible sections as well as not able to add title to newly created collapsible sections.

Other people are also facing the exact same issues. Check these threads:

  1. SharePoint: Collapsible sections on modern pages - check comments section
  2. Modern SharePoint: Collapsible Sections No Longer Allows Editing Section Title

I will recommend to raise a support ticket with Microsoft, check Get Online support


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.

@Monica2820 I am now able to update the section title from section settings/property pane:

 

ganeshsanap_0-1638950614670.png


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

Thanks for linking me to those forums, useful to bookmark.