AccordionView Widget for YUI from Marco van Hylckama Vlieg

Blog
About

Site Search:

AccordionView Widget for YUI from Marco van Hylckama Vlieg

July 25, 2008 at 6:08 am by Eric Miraglia | In Development, YUI Implementations |

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

Share and extend: Bookmark with Yahoo! My Web | Bookmark with del.icio.us | digg it! | reddit!

17 Comments »

RSS feed for comments on this post.

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

Comment by Justin Sane — July 25, 2008 #
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.

Comment by Tom Hughes-Croucher — July 25, 2008 #
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!

Comment by Marco — July 25, 2008 #
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!!

Comment by Pam — July 25, 2008 #
@Marco — glad to hear it…can’t wait to see the next version! -Eric

Comment by Eric Miraglia — July 25, 2008 #
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.

Comment by Michiel van der Blonk — July 26, 2008 #
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.

Comment by Marco — July 27, 2008 #
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

Comment by Memorathoner — July 27, 2008 #
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.

Comment by Marco — July 27, 2008 #
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).

Comment by David — July 28, 2008 #
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’!

Comment by Marco — July 28, 2008 #
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!

Comment by Marco — July 29, 2008 #
Does it support vertical accordions?

Comment by I. Stan — July 30, 2008 #
Nope, no vertical accordions at the moment.

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

Comment by Marco — August 2, 2008 #
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

Comment by rIpteyed — August 11, 2008 #
@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!

Comment by Marco — August 16, 2008 #
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

Comment by BrianM — August 27, 2008 #

Yahoo! User Interface Blog