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” “http://www.w3.org/TR/html4/loose.dtd“>

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..

The options

duration – can be a time in ms or ‘slow’ ‘fast’ – see http://api.jquery.com/slideUp/ 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’.

Comments
  • Judith Osnoe
    Posted at 12:30 pm August 16, 2016
    Judith Osnoe
    Reply
    Author

    please repost the script… Thank you

  • Eric Saint-Etienne
    Posted at 10:46 pm June 20, 2012
    Eric Saint-Etienne
    Reply
    Author

    Unfortunately it doesn’t fully work : the 1px you display actually accumulates at wach click, so that if you click 20 times, you end up showing the first 20px of the active item.
    (Using the 4.01 Transitional doctype without dtd in IE8/quirks)

    • Thomas Daly
      Posted at 2:17 am June 21, 2012
      Thomas Daly
      Reply
      Author

      I’ve uploaded the most recent script which accounts for that. thx for the feedback, hope that one works for you.

  • Janet
    Posted at 11:29 pm May 13, 2012
    Janet
    Reply
    Author

    Hi Tom,
    Did you track down the CSS file? The link only seems to take me to the Javascript. Also, could you please tell me which version of JQuery you were using? Thanks

    • Thomas Daly
      Posted at 2:13 am May 14, 2012
      Thomas Daly
      Reply
      Author

      Janet,

      I think at the time this was written I was using version 1.4-1.6 or somewhere in that range. I believe that you can use the latest version with the script i don’t think it will matter. I looked around but I do not have a CSS file associated with this. If you implement it you will still see it work but it has zero styles so it’s totally up to you to create. This was done in the past to overcome the issues with IE 6 and quirks mode. So if your on anything else I’d use jQuery UI and there accordion.

      • Janet
        Posted at 2:17 am May 14, 2012
        Janet
        Reply
        Author

        Great, thanks. I’m stuck with an old legacy system at work that generates a broken doctype (which they refuse to fix!) so I’m forced to deal with quirks. It really limits what you can do, so I’m excited to give this a go!

  • Alec
    Posted at 8:48 pm March 3, 2011
    Alec
    Reply
    Author

    The link to your script and CSS no longer exists. I was wondering if you still had this code available? I would love to give it a try.

    • Thomas Daly
      Posted at 8:58 pm March 3, 2011
      Thomas Daly
      Reply
      Author

      Alec,
      Thanks for letting me know about that. I will look through my stuff and post the back up, I’ll shoot you an email w/ it as well.
      -tom

  • Leave a Reply