jQuery-Based Quick Launch Accordion

ByMarc D Anderson

I’ve just added a new page to my Sympraxis Consulting demo site which shows how you can display an accordion effect on the Quick Launch. This page shows how you can change the behavior of a basic SharePoint page control with a little jQuery.

If you look at the Quick Launch on the page, you’ll notice that it is collapsed, not showing any of the lists or libraries for the site. The jQuery code uses the jQuery HoverIntent plugin and provides accordion-like behavior for the Quick Launch. The HoverIntent plugin is useful because it makes sure that you are really hovering over a header rather than just passing the cursor over on your way somewhere else.

Hover over any header to see how this behavior works. Depending on what browser you are using, you’ll probably see some flickering as the Quick Launch expands or collapses. This demo is more of a proof of concept, and in a real implementation you’d obviously want to clean that up.

As with all of my demos, the demo code is available for easy download through links on the demo page.

If there’s enough interest, I may tighten this up for inclusion in a future version of SPServices. If you’d be interested, leave a comment below!

Similar Posts

22 Comments

  1. Nice! I’m very interested in this – exactly what I’ve been after for an idea I have. Can’t wait to try it out. Thanks Marc!

    Reply

  3. Hi Marc, Definitely a cool and very useful feature to add to SPServices. A couple of comments/ questions:

    1. could there be a 2010 version of it? (DOM structure for unordered lists being different on 2010, jQuery selectors are likely going to be different…? – haven’t checked the quick launch DOM structure recently so this is from memory)
    2. vertical accordion is great, combining it with a toggle show/ hide and/or tie it to permission groups using other SPServices operation would be an awesome extension (similar to the site index on http://msdn.microsoft.com/library/default.aspx)
    3. I noticed a little ‘jump’ – probably due to padding? I have absolutely no idea how to resolve it within SharePoint but back a few months back, I had taken a look at http://www.sohtanaka.com/web-design/simple-accordion-w-css-and-jquery/ and there were some fixes for this bug (I have not tried it and have limited CSS knowledge)

    Hope you had a great Christmas,
    Greg

    Reply

    1. Greg:

      Sorry for the delayed response, but I was sick for a while, yadda, yadda. I hope you don’t mind, but I edited your comment into an OL so that I could reply more neatly.

      1. Absolutely, there could be a 2010 version of this. While the DOM is different, it’s predictable. What it means is that the exact same code won’t work in both versions. I have to figure out what my approach for tihs sort of thing in SPServices is going to be, e.g., totally separate libraries (a pain to keep in synch where they need to be) or one library with branching logic (makes thing bloated for both environments). Not sure yet.
      2. Absolutely. If you can define the business rules for what you want, that sort of thing is possible.
      3. Definitely fixable. I had that script lying around mostly done from a while back and just decided to get it out there for folks to fiddle with. It’s a timing issue with the slideUp/slideDown behavior.

      M.

      Reply

  4. SWEET Marc!, That is a very handy thing, especially for those with the desire to have lots in their QuickLaunch. I would love to see a ‘production-ready’ version…in both 2007 & 2010.

    Reply

  5. This is cool, although I wouldn’t think that it belongs in SPServices. There will be people that have no interest in this and want a focus on the neat web service functionality you have.

    It might be nice to see in its own project, perhaps with other similar bits and pieces?

    Reply

    1. Alex:

      I debate myself frequently about what belongs in SPServices and what doesn’t. This wouldn’t take advantage of the Web Services, so probably doesn’t belong. On the other hand…

      M.

      Reply

  6. Awesome. we’ve been toying with writing something that does this, but now it appears that you’ve saved the day for us. I’ll be adding this to our dev sites asap.

    Reply

    1. Abdullah:

      As I pointed out in the post, it was just a proof of concept even for SharePoint 2007, and would need some work to be useful in a real situation.

      The same would certainly be true for SharePoint 2010, and you’d need to adapt it to the 2010 markup.

      M.

      Reply

  8. Hi Marc!

    A very cool feature. I just used it on one of my SharePoint 2007 test site and works great. I did notice that this function sorts the headers in alphabetical order. which changes the default navigation order. Is there a way to disable the automatic sorting.

    Regards,
    Waqas Iftikhar

    Reply

    1. I just changed the navigation order from the sharepoint site settings page to the orignal settings and reloaded the main page and the sorting did not change.

      Waqas

      Reply

    2. waqas:

      This script doesn’t do any sorting at all. You should see the same order of things that you start with. In any case, this is just a starting point which you can take in any direction you choose.

      M.

      Reply

  9. Hi Marc,
    awesome job. but i IE the menu jitters while sliding down and coming,
    cloud you please suggest where to what things i should see to fix it. i tired width and all , but nothing worked for me.

    Thanks,
    VerveX

    Reply

    1. As I think I note in the post, I only took it this far to see how it might work. Any CSS customizations you may have in place could have an impact as well.

      The jQuery animation effects seem to work best on DIVs, so doing some modification of the DOM elements up front may improve the effects.

      M.

      Reply

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.