So this weekend I spent a whole lot of time trying to impliment the Jquery UI accoridion plug in on a site for one of our clients. I’ve done this in the past with different approaches to get it to work properly but this time I just had enough. There is an issue for most SharePoint ppl that alot of cool JQuery plugins don’t work or don’t work as displayed on their home websites. The problem usually has to deal with two specific things.. 1) the DOCTYPE or 2) some CSS issues.

So for those that may have tried to implement the JQuery accordion plugin you might have noticed a jumpy / flash/ glitch or whatever you wanna call it, only on the SlideUp portion. Basically this IS because of the DOCTYPE and there are certain options available to you which i’ll explain. So if you using the default OOTB masterpage.. there is no associated doctype this will make your IE renderin in Quirks mode and the official JQuery plugin won’t work. The exact problem is with the animation specifically when the height attribute goes to 0px. That’s when you will notice a full size flash or jump of the object being animated. If you set the height to 1px when you animate you won’t see the flash. The Simple Accordion plugin is animated to height 1px so it will work in Quirks mode.

If you are using the Heather Solomon masterpage (Depending on where you’ve downloading this from) it could have an incomplete DOCTYPE which still causes the browser to render in Quirks mode.

This is what i see in the HeathersBaseCollaborationMasterPage & HeathersBasePublishingMasterPage

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>

but if you used HeathersBaseMasterPage you’ll get this. This is one of the correct DOCTYPEs supported by JQuery

<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” ““>

So you could try to change the DOCTYPE to the HTML Strict or HTML Transitional but this might cause other issues with your current CSS. But then again maybe not. Or you could try to use this Simple Accordion type plugin i’ve created which will work in quirks mode because we are avoid the height issue as specified above.

OK – NOW TO THE PLUGIN.  There are 3 pieces the HTML, the JQuery and the CSS


Section 1

Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.



Section 2

Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna.



Section 3

Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.

    • List item one


  • List item two



  • List item three




Section 4

Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est.

Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

Download the Script from here

Example to run it would be..

$(document).ready(function() {
        duration: 'fast',
        oneOnly: false

The options

duration – can be a time in ms or ‘slow’ ‘fast’ – see for more info. Default is ‘slow’.
oneOnly – true or false – True, only one panel can be open at a time, false for multiple panel open at the same time. Default ‘true’.

About the Author

Developer, Designer, Thinker, Problem Solver, Office Servers and Services MVP, & Collaboration Director @ SoHo Dragon.

View Articles