can anyone help to provide the JSON code for Accordion to build on Modern Site?

%3CLINGO-SUB%20id%3D%22lingo-sub-1323369%22%20slang%3D%22en-US%22%3Ecan%20anyone%20help%20to%20provide%20the%20JSON%20code%20for%20Accordion%20to%20build%20on%20Modern%20Site%3F%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1323369%22%20slang%3D%22en-US%22%3E%3CP%3EHi%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI%20need%20to%20build%20the%20collapsible%20menu%20on%20modern%20site%20that%20can%20pick%20up%20the%20SharePoint%20List%20that%20I%20have%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3Eanyone%20can%20provide%20the%20coding%20%2C%20as%20I%20am%20not%20a%20developer%20and%20cannot%20write%20code.%3C%2FP%3E%3CP%3EI%20have%20a%20list%20with%203%20columns%20for%20FAQ%20(Category%2C%20Question%20and%20Answer).%26nbsp%3B%3C%2FP%3E%3CP%3Eneed%20it%20to%20auto%20pick%20and%20populate%20the%20data%20from%20the%20SP%20list%20to%26nbsp%3Bthe%20collapisble%20menu%20on%20the%20page%20as%20an%20when%20it%20is%20edit%20or%20add%20new%20items%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSPAN%3ETo%20look%20someth%20like%20this...%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSPAN%3EUser%20click%20on%20the%20%2B%20icon%20to%20read%20the%20answer.%26nbsp%3B%20%26nbsp%3Bcan%20anyone%20help.%26nbsp%3B%20I%20can%20only%20add%20the%20coding%20format%20into%20the%20Format%20View%20(attached%20below..)%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20image-alt%3D%22Coll%20menu.JPG%22%20style%3D%22width%3A%20308px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F185510iD037A953EE531451%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20title%3D%22Coll%20menu.JPG%22%20alt%3D%22Coll%20menu.JPG%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%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20image-alt%3D%22Format.JPG%22%20style%3D%22width%3A%20349px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F185511iE1E44E6ABD22ABE1%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20title%3D%22Format.JPG%22%20alt%3D%22Format.JPG%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3EI%20find%20this%20code%20(attached%20doc)%20but%20the%20remaining%20part%20are%20not%20usable%20as%20it%20is%20different%20layout..%20can%20anyone%20help.%26nbsp%3B%20Appreciated.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-LABS%20id%3D%22lingo-labs-1323369%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3EDeveloper%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3ESharePoint%20Online%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1324364%22%20slang%3D%22en-US%22%3ERe%3A%20can%20anyone%20help%20to%20provide%20the%20JSON%20code%20for%20Accordion%20to%20build%20on%20Modern%20Site%3F%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1324364%22%20slang%3D%22en-US%22%3EHi%2C%3CBR%20%2F%3EHave%20you%20tried%20the%20below%20sample%20from%20sp-dev-list-formatting%20repo%20from%20the%20community.%3CBR%20%2F%3E%3CA%20href%3D%22https%3A%2F%2Fgithub.com%2FSharePoint%2Fsp-dev-list-formatting%2Ftree%2Fmaster%2Fview-samples%2Ffaq-format%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fgithub.com%2FSharePoint%2Fsp-dev-list-formatting%2Ftree%2Fmaster%2Fview-samples%2Ffaq-format%3C%2FA%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1331955%22%20slang%3D%22en-US%22%3ERe%3A%20can%20anyone%20help%20to%20provide%20the%20JSON%20code%20for%20Accordion%20to%20build%20on%20Modern%20Site%3F%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1331955%22%20slang%3D%22en-US%22%3EOk%20will%20check%20it%20out%3CBR%20%2F%3E%3CBR%20%2F%3ETks%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1342349%22%20slang%3D%22en-US%22%3ERe%3A%20can%20anyone%20help%20to%20provide%20the%20JSON%20code%20for%20Accordion%20to%20build%20on%20Modern%20Site%3F%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1342349%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F144422%22%20target%3D%22_blank%22%3E%40Sudharsan%20K%3C%2FA%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EThank%20you%20.%26nbsp%3B%20The%20code%20only%20create%20the%20Q%20and%20A%20into%20a%20box.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3Ethere's%20no%20accordion%20collapsible%20to%20the%20code%20and%20how%20to%20have%20the%20Category%20as%20Header%20on%20top%20of%20the%20Question%3F%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3Ehow%20to%20add%20in%20the%20collapsible%3F%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EThank%20you%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E
Highlighted
Occasional Contributor

Hi

 

I need to build the collapsible menu on modern site that can pick up the SharePoint List that I have

 

anyone can provide the coding , as I am not a developer and cannot write code.

I have a list with 3 columns for FAQ (Category, Question and Answer). 

need it to auto pick and populate the data from the SP list to the collapisble menu on the page as an when it is edit or add new items 

To look someth like this...

 

User click on the + icon to read the answer.   can anyone help.  I can only add the coding format into the Format View (attached below..)

Coll menu.JPG

 

 

Format.JPG

I find this code (attached doc) but the remaining part are not usable as it is different layout.. can anyone help.  Appreciated.

 

 

3 Replies
Highlighted
Highlighted
Highlighted

@Sudharsan K 

 

Thank you .  The code only create the Q and A into a box.

 

there's no accordion collapsible to the code and how to have the Category as Header on top of the Question? 

 

how to add in the collapsible?

 

Thank you