Accordion menus are all the rage at the moment (as are Carousels and Sliders). I wanted a snazzy way to show my resume during my recent job search so I went looking for an accordion-style menu. I had these requirements in mind:
1) be lightweight
2) use unobtrusive Javascript techniques (ie not have scattered Javascript all over the markup)
3) use simple CSS to make it look nice
4) needed to support both single and multiple sections opened at a time.
My search came up short. Most were overly complicated, or they required libraries other than what I already have running on my sites. Too much bloat. I guess I'd have to write my own. Since I already use the *radical* YUI libraries on my sites, making it YUI-powered was the way to go for me. I set my goal to <100 lines of good OO unobtrusive Javascript. The current version sits at 80 LOC with lots of comments. Here's what it looks like:
**note that the size of the menu is dynamic, however to embed it in a blogger post I had to use the ol <iframe> trick.
JILS_accordion will make an unordered list <ul> of your choice into a spiffy animated accordion menu. These are the steps to get it going on your site:
Massage the Markup:
While any <ul> will work, you need to make sure it has an id.
Next you need to create two divs inside of each <li>. One div for the title with class accordionTitleDiv, and one for the content with class accordionContentDiv The markup should look like this:
*Note it is not necessary for the individual <li> elements to have id's
Include the JS & CSS Files, initialize the JILS_accordion object:
The first argument for the constructor function is an object that can be left empty '{}' or you can specify things like {multiSelect:true, sectionExpandedSize:10}, etc. The code is heavily commented so most front end guys will be able to figure it out.
Open accordion example in a new page
Updated to v 1.1b following a heads up from Satyam that the widget was broken in IE. Turned out to be a different bug. A 'dangling' comma after the last item in my callback object definition was the culprit, but I still wrapped the init methods using YAHOO.util.Event.onDOMReady() -- just in case. Thanks Satyam!
Update #2 v1.2b A few performance tweaks: Switched to using the YUI aggregate file utilities.js, which includes everything we need in one line AND loads faster with a single HTTP request. Updated the initializing code to show how onDOMReady() can be used as an alternative to onload(). YUI's onDOMReady() makes sure the DOM is ready to go, but doesn't wait for images to be loaded for a snappier page load. The last tweak was to the default animation speed... now with 1/2 the Saturated Fat!
Update #3 v1.3 Per some user requests, the accordion should now toggle only when clicking on the title section, not the content. If you want the old behavior, set "onlyCollapseOnTitleClick" to true in the constructor args.
6 comments:
Have you tried it in IE? Its not working for me. The code in the sample page tries to execute when the rest of the library and your own component has not fully loaded. Try enclosing the script in your sample page in a call to onDOMReady
Thanks satyam! The bug actually was a dangling comma after the last property in my callback object inside the helper I use to retrieve div contents. I went ahead and wrapped it with onDOMReady just to be safe.
BTW, are you the same "satyam" from the YUI mailing list?
Yes, the very same Satyam. You might want to check Eric's post of your app in the YUI blog, someone else noted the IE issue and commented it there, you might want to state that it's been fixed. By the way, I was wondering where are you? I'm in Sitges, close to Barcelona
It's really very slick, well done, but pleeease make it faster by default! Faster faster faster! I hate waiting around for animations, even if they're pretty - Lightbox made my broadband feel like dialup, and I'd hate for this to inspire the same frustration and impatience.
If one wanted to use this menu for site navigation what extra needs to be added?
In particular the problem of remembering menu state (ie which menu div is visible) as one navigates the site comes to mind.
The component is excellent. It works on both IE and Mozilla. But, I need the accordion to collapse only when i click on Title section, not on the content area. How can I do that ?
Gandhi Basnet
Kathmandu, Nepal
Post a Comment