AccordionView Widget for YUI from Marco van Hylckama Vlieg

By YUI TeamJuly 25th, 2008

The AccordionView Widget based on YUI, by Marco van Hylckama VliegMarco van Hylckama Vlieg, author of the YUI-based Dark Matter theme for Pixelpost (free version | pro version), is back with another outstanding contribution to the YUI ecosystem: The new AccordionView Widget.

We’ve written about a number of YUI-based accordions over the years, but this may be the most complete and the most consistent with YUI’s own widget style. Visually and syntactically, Marco’s accordion feels part and parcel with other YUI widgets you may be using.

Markup for the widget begins with an unordered list:

<ul id="mymenu" class="yui-accordionview">
    <li class="yui-accordion-panel">
        <a class="yui-accordion-toggle" href="#">Item 1</a>
            <div  class="yui-accordion-content">
                <!--content goes here-->
            </div>
     </li>

    <li class="yui-accordion-panel">
        <a class="yui-accordion-toggle" href="#">Item 2</a>
            <div  class="yui-accordion-content">
                <!--content goes here-->
            </div>
     </li>
</ul>

Once markup is in place, you can instantiate the widget:

var accordion = new YAHOO.widget.AccordionView('mymenu', options);

According to Marco’s documentation page, AccordionView supports the following options:

  • width: css value for width including unit (example: ’400px’, ’15em’, etc.)
  • expandItem: index of item to expand at initialization, default is none. 0 is the first, 1 the second, etc.
  • animationSpeed: speed in seconds for animation. The default is 0.7
  • animate: true or false, default is true
  • effect: YUI Animation effect to use on animation. See the documentation on YAHOO.util.Easing. Default is YAHOO.util.Easing.easeBoth
  • collapsible: true or false, whether the whole thing can be collapsed or not, default is true
  • expandable: true or false, whether the whole thing can expand (true) or act as an accordion where only one item can be open (false). default is false
  • hoverActivated: true or false, when set to true, the items are activated on hover. Note that this activates on click ALSO in order to keep keyboard navigation working.

Marco calls AccordionView a “work in progress”; you can give him feedback on how it’s working for you and what features you’d like to see added or refined on his blog.

27 Comments

  1. Justin Sane said:
    July 25, 2008 at 6:25 am

    Wouldn’t it be more proper to write “Marco the Yahoo employee” instead of shamelessly bumping his commercial theme once again?

  2. Hey Justin,

    You are right Marco does some awesome stuff at work too. I think just Eric referred to his pixel post theme because it’s something that he did in his own time. We refer to other people who build commercial products all the time on the YUI blog I don’t think Marco deserves any worse treatment.

    Not only that but the free version of his Pixelpost theme has some great reviews and is totally open source.

  3. Thanks a lot for mentioning my work here Eric. I really appreciate it. Thanks to this entry I received some extremely valuable feedback I will use to improve the quality and robustness of this widget in the days to come. Most excellent!

  4. I don’t think where someone works is an issue for the YUI blog. It is pretty much about things that are built with YUI. Marco here has done an awesome job using this platform. This is great clean work, done outside of work time! Great Job Marco!!

  5. @Marco — glad to hear it…can’t wait to see the next version! -Eric

  6. a href=”#”

    Start reading any expert on usability to learn why this is just plain wrong. It’s the easy way out: you want something that looks like a link, acts like a link, but it’s not a link.

  7. Thanks for stating the obvious, Michel! Did you miss the ‘work in progress’ part?

    I’m currently testing a version that works on completely bare markup without any links in it and no need for any pre-set classnames either. It will be out pretty soon.

  8. Memorathoner said:
    July 27, 2008 at 7:20 am

    Marco,

    Fantastic piece of work!!

    Two suggestions (if they have not been made already):

    Right-align the collapse/expand button
    fill configuration property (cf. Class Ext.layout.Accordion : Config Options : fill)

    I’ve been looking our for a similar offering from YUI Library for a long time. I hope it will find its way into the library.

    My compliments,
    Michael

  9. After some serious cracking with excellent help of Satyam I posted an all new and updated version with tons of improvements and new features.

    Among many other things it also addresses the issue brought up by Michiel. You can now use pretty much any markup you want.

  10. The biggest problem I see with this widget is that the version that works on hover works very poorly. if you hover over multiple elements quickly (ie. mouse just passes over them), you get a messy bunch of slow animation.
    You need to add a timer to the hover event listener so that if the mouse just passes over, it does not trigger the event.
    And if one section is currently animating, maybe speeding up the other animation or something to make it smoother would be better.
    Although I have used YUI for my accordian, I am afraid I don’t think I would use it again, as the animation in YUI is not nearly as smooth as another framework I would never use (but they have fine animation).

  11. I have to agree with you David! To be honest the on hover feature is still very barebones. I don’t even like on-hover accordions myself really but it’s something people seem to want. I’ll try to make it work with a timeout like you suggested. I already sort of had that on my list.

    Sadly I also have to agree about the animation. While YUI animation works it’s certainly not on par with another framework that you don’t use but I sometimes do use ;)

    Team: the animation library needs some lovin’!

  12. I have now added a configurable timeout for when the accordion tabs are activated on mouseover.

    Thanks to Nicholas Zakas for helping me figure out why the hell it wasn’t working in IE!

  13. Does it support vertical accordions?

  14. Nope, no vertical accordions at the moment.

    To be honest, I think for vertical presentation a carousel would be much better than an accordion.

  15. I’m getting noticeable a “flicker” in IE 7, has this been addressed? Is there anything I can do to resolve this issue? It isn’t happening with FF.

    The parameters I’m using:

    menu = new YAHOO.widget.AccordionView(‘menu’, {collapsible: true,
    expandable: false,
    width: ’265px’,
    animate: true,
    animationSpeed: ’0.1′,
    effect: YAHOO.util.Easing.easeBothStrong } );

    Thank you in advance, this is a great accordion…!

    rIpteyed

  16. @ripteyed hmmm I cannot reproduce this. I tried to set the example page to your speed of 0.1 but I see no flickering in IE7.

    There used to be some flicker in Gecko 1.8 or lower but I fixed that earlier.

    Feel free to email me and point me towards a page on which I can see the flickering you describe in action and I’ll take a look!

  17. Hi, first off, I am loving this widget! The only issue I am having right now is that if I have tables in my accordion pages I get a weird ghosting effect of the table borders as I switch between accordion links. This only happens in IE (testing on version 7). I haven’t done a lot of fiddling with this but I just wanted to post my experience. thanks,
    Brian

  18. Mazhar Khan said:
    March 15, 2009 at 4:50 am

    Hi,
    ofcourse its a great stuff for web developers, just few changes require to modify yui accr.
    but i m facing a problem wid it ven i inserted a table within hieght of page increased please tell me solution.

  19. I am trying to use this widget inside a tab created by the TabView YUI widget. When I added the AccordionView widget inside the tab, it broke the tabs and made all the content display on the page at once. I did some troubleshooting and it seems like the inclusion of the utilities.js file is what’s breaking it. I remove the link to that script, and the tabs work again (but unfortunately, then the accordion widget doesn’t).

    I assumed since both of these were YUI widgets that I could combine them. Isn’t that true? Thanks for any help!

  20. When I noticed that you had already combined TabView and AccordionView on the same page (for your news feed demo), I was inspired to keep trying… I finally tried moving the script tag that imports utilities.js to the top of the list (instead of the bottom of the list where it was) and for some reason that did the trick.

    I now have the accordion working inside a tab. Thanks!

  21. Hi,
    Solution for flicker on IE7.

    I too was facing problem of getting flicker on IE7 for the accordian view. I tried following and it worked! :) Just wanted to share with you..

    Earlier I have something like this in my html page:

    I changed it to

    as in the example I saw @ http://www.i-marco.nl/weblog/yui-accordion/menu/

    and it solved the problem. Now I do not get any flicker!

    Hope this helps and is the correct way of doing it!

    Thanks for the wonderful widget. I love it!
    Cheers,
    Rohit N

  22. (Not sure why my previous comment got truncated… Maybe the html tag. Posting again for reference)

    I updated the DOCTYPE tag in my html to be as below

    !DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”

    (Note: Please refer to the DOCTYPE tag of source code of example posted at http://www.i-marco.nl/weblog/yui-accordion/menu/) Using similar DOCTYPE to that solves the problem.

    Earlier my DOCTYPE tag had
    “-//W3C//DTD HTML 4.01 Transitional//EN” and did not include the “http://www.w3.org/TR/html4/strict.dtd” part.

    (P.S: Sorry that some parts of post got truncated due to html tag in part of the text I posted.)

    Thanks!
    Rohit N

  23. Hi, I am having html tables in the accordion and I am seing a wierd effect of table borders even when the table is not shown! :( I see the table borders as white lines always there on the page while using the accordion.
    Does anyone know the solution to this?

  24. is there a way to figure out which panel is the target of one of the open/close events? I am trying to lazy load the LI content on the first time a panel is opened using ajax, so that the page loads quicker.

    I would like to add a listener for the panelOpen event that checks to see if the content is empty and loads it.

  25. Hi, I’ve tried to use this widget and it messes up with a yui menu that i had developed before. Do you have any hint on this?
    Thanks, regards.

  26. Andrew Crawford said:
    December 9, 2009 at 2:33 pm

    It looks like including utilities.js breaks other YUI components/widgets, including menu and treeview.

  27. Andrew — not sure of the context for your question, but it sounds like one to ask on the developer forums: http://yuilibrary.com/forum/. Provide full details about what you’re having trouble with and a link back to the page you’re working on. -Eric