What I have : On SharePoint Online, three content query webparts which use catalogs. So these webparts display files from other collections.

What I need : that this three webparts become one dynamic accordion.

That is to say, if you click on "Library one" it reduces "Library two" and "Library three". If you click on "Library two", it reduces the others, etc.

Honestly I have no clue on how to do that or if it's even possible. I used some JS before to customize my pages but not so much.

I'm searching for a client-side solution JSOM/JQuery. Thank you for your help.


One possible option to achieve this is as follow:

  • Create a custom page layout.
  • Design your accordion there
  • Keep empty webpart zones in the each accordion box.
  • Create the page with new page layout.
  • Edit the page from browser, and now you will have accordion look and you can add your CQWP in the empty webpart zones.

I have done this practically for displaying multiple document library in accordion.

Required tool is just a SharePoint Designer.

Sample I have done:

enter image description here

  • Thank you for your asnwer, but you're right the other answer seems more simpler for me :) – M. Jouot Jun 29 '17 at 8:08

You can use JQuery UI accordion or Bootstrap Collapse to create Accordion.

Also, since you want to attach it to a content query web part, you must opt for Client Side Rendering also known as JSLink. This will let you define the rendering of your data. Which can be utilized in creating accordion. Here is a blog explain CSR in details.


I didnt read you dont want to implement CSR on Content By Query Web Part. So, CSR in not required in you case. Just Add the three web part to web part zone on page. After that, open the page tab and click on edit source. From there, add the CDN/SiteAssets reference to JQuery and JQuery UI or Jquery and Bootstrap. And finally add the Lable divs and add accordion class name from desired library to other Web part divs.

  • 1
    This approach is quite more simpler than mine. :-) – Aakash Maurya Jun 28 '17 at 9:28
  • 1
    Thankyou. I prefer using some standard JS libraries to simplify work. – ThinkB4Code Jun 28 '17 at 16:00
  • Thank you for your answer, I will try that and see if it fits my need ! :) – M. Jouot Jun 29 '17 at 8:07

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.