Simple Accordion type plugin for JQuery – works w/ Quirks mode!

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

 <!-- html -->

<style>
#simpleAccordion h3 {
 cursor: pointer;
}
</style>

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.

<H3>Section 2</H3>

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.

<H3>Section 3</H3>

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
<H3>Section 4</H3>

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.

</div><!-- end simple accordion -->

Download the Script from here

Example to run it would be..

$(document).ready(function(){ 
$("#simpleAccordion").simpleAccordion({ duration : 'fast', oneOnly : false }); 
});

The options

 duration - can be a time in ms or 'slow',<br>'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'.
Advertisements

9 thoughts on “Simple Accordion type plugin for JQuery – works w/ Quirks mode!

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

    • 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

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

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

      • 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!

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

Comments are closed.