Transform a SharePoint Web Part Zone into a jQuery Accordion

Transform a SharePoint Web Part Zone into a jQuery Accordion

I’ve developed another sandbox web part for SharePoint 2010! This time I’m tackling jQuery UI Accordions. I’ve again added some customization to the web part so you have more control over how the accordion displays. Most of the parameters are made available through the web part properties panel:

  1. active
  2. collapsible
  3. disabled
  4. event
  5. heightStyle

A few that are missing or incomplete:

  1. active – boolean option to collapse all panels by default
  2. animate
  3. header
  4. icons

Overview of the Code

I’ll include the code below just as I did with the tabs web part from earlier. We add a few custom web part properties that can be edited, and use them to output some data on to the page. Most of the real coding is still found in the jQuery function further down the page. You’ll notice this is 95% similar to the last project.

Web Part

JavaScript (jQuery)

Note that the web part itself includes this code in it’s minifed form (line 122).

Keep within Viewport

There is one option above that is worth mentioning alone. The “Keep within Viewport” option is a usability feature I’ve built into the accordion. If you’ve ever used an accordion on a smaller device, like a cell phone, you’ve probably ran into the issue when activating a panel that your content slides off the page. This isn’t a friendly behavior, so this adds a check to make sure the accordion is visible on the page,

Download the Web Part

Want to use it in your own environment?

You’ll need the uploadable WSP file.

Want to make changes or explore the code?

You’ll need the Visual Studio Project.

Add to the Gallery, Use in Your Page, All Done!

Please checkout the video I posted on YouTube for the jQuery Tabs web part. This web part functions exactly the same, with a few more options. If somebody requests a new video covering this specific web part, I’ll record one and replace it. For now watch the previous how-to:

Help Me Improve It

Here are some of the limitations as of March 27th 2014:

  1. Inclusion of jQuery and jQuery UI scripts are inline with the web part itself.
  2. Missing boolean option for jQuery Accordions active – to collapse all panels by default.
  3. Missing options for jQuery Accordions animate property.
  4. Missing options for jQuery Accordions header property.
  5. Missing options for jQuery Accordions icons property.
  6. Missing options for jQuery Tabs Show method.
  7. I’d love to remove the Appearance, Layout, & Advanced groups and also have the jQuery group open by default.