wpAccordify – Make Any Microsoft SharePoint Web Part Zone an Accordion!!

This script allows you to ‘Accordify’ (turn into an accordion) all the web parts in any web part zone you’d like!

Requirements

  1. Make sure your master page or page layout has the latest version of jQuery attached

Download the Code

UPDATE HISTORY

  • 4/8/2016
    • version 2.0 – fixed some errors around list view web parts inside accordion content, removed dependencies on images for icons

How to Use It

  1. Attach the Accordify script to your master page or page layout or copy the script into an already attached javascript file
  2. Attach the accordion-styles styles to your master page or page layout or copy them to an already attached css document
  3. Unzip and then upload the Accordify.dwp file to your web parts gallery
    • go to site settings from the gear icon in your ribbon
      site-settings
    • click on web parts under Web Designer Galleries
      webparts-gallery
    • click upload document from the ribbon
      upload-document
    • you can leave the rest of the options as their default and click ok
  4. Once that’s done – go to the page that has the web parts that you need to accordion and add the Accordify web part to that zone
    accordify
  5. you will then see this in that zone – that hidden web part is the Accordify web part – it houses a hidden span that the script looks for to know that this zone should be an accordion
    accordify-added
  6. Voila!!! all those web parts in that zone are now an accordion!
    wpAccordify-active2
  7. please read the script file for the different accordion options you can use. ENJOY!

You may also like...

6 Responses

  1. Rita says:

    Hi, thank you for the code and tutorial. The accordion works great, except for the web parts are loading/flashing on the page for a second before the accordion loads. When I set a web part as ‘Hidden’, it is no longer included inside the accordion. Please advice. Thank you for your time, Rita.

    • Sonny says:

      Hi Rita

      I’m glad you found my post useful. Thank you very much for visiting my blog and commenting!

      The flash of unstyled content or FOUC is a very common ‘problem’ with using javascript, or jQuery in this instance. The code has to wait for there to be content on the page for the code to execute on that content.

      The most common way to avoid this is to hide the area or elements with CSS and then in the code you reveal them after everything has executed.

      The drawback there is that it really defeats the purpose of this particular web part. Since I was trying to keep it as dynamic as possible where you can turn any zone into an accordion and not just specified ones in the page layouts.

      I’ve been doing some research on it since your reply and I really haven’t found any great solution to this except the above suggestion. You’d have to add a specific class to a container element around your zone in your page layout, hide that with css, then do a jQuery(‘.your-new-class’).show(); after the accordion function call.

      I guess you could hide all web part zones in general and then reveal them using code after the script executes.

      Unfortunately, this code is dependent on there being a specific div with class ‘accordify-this-zone’ before it does anything and that’s only there after the content loads. I’ll see if I can find anything else on the matter and hopefully update my code or my tutorial on this if I find anything significant.

  2. Unès says:

    Hi Sonny,

    First of all thank you so much for the effort,

    My question is can we accordify webpart without uploading Accordify.dwp file?

    what i do is i have a zone with 3 “Content Editor” web parts and a “Html form web part” where i put the script and the style.

    • Sonny says:

      Hi,

      it will definitely work that way – the Accordify.dwp webpart is honestly nothing more than a Content Editor web part that is set to hidden and has a span with class of “accordify-this-zone” in it’s body

      so if you add another CEWP in that zone and set it to hidden and add that span to its source html – then that zone should become an accordion

      let me know if that works!

      thanks

  3. Geri says:

    Hi Sonny,

    I have all the elements, but this fails to work in SharePoint 2010 for me 🙁
    Are there any adjustments I need to make to any of the files, i.e., js file and web part naming?

    • Sonny says:

      Hi Geri

      can you please send me the url of the site? if it’s private then please check the console in your browsers dev tools to see if there are any errors

      you defintely have jQuery and jQuery UI attached to the masterpage or page layout? or embedded in the page somehow?

Leave a Reply

Your email address will not be published. Required fields are marked *

2 + two =