YUI 3 Gallery: Accordion Widget

By Iliyan PeychevNovember 4th, 2009

YUI3 Accordion Widget
Accordion is a visual widget that allows the expansion/collapse of grouped items containing arbitrary data. Accordion items can be added or removed dynamically, reordered via drag-and-drop, closed and set as always visible. Originally, I built the widget top of YUI 2, but I’ve since ported it to YUI 3.

Accordion is part of the new YUI 3 Gallery, offered under the YUI BSD License, and available on the Yahoo! CDN.

The module consists of two classes — Accordion itself and AccordionItem, both extending YUI 3′s Widget.

Building an Accordion

The developer can build an Accordion from markup or from scratch using JavaScript. Check out the examples on GitHub for more information.

If you are building from JavaScript, the first step is to instantiate and render Accordion:

var accordion = new Y.Accordion( {
    contentBox: "#accordion1",
    useAnimation: true,
    collapseOthersOnExpand: true
});

accordion.render();

The next step is to add one or more items:

var item1 = new Y.AccordionItem( {
    label: "Item1, added from script",
    expanded: true,
    contentBox: "dynamicContentBox1",
    contentHeight: {
        method: "fixed",
        height: 80
    },
    closable: true
} );

item1.set( "bodyContent", "Dynamically added item with fixed content height, 80px." );

accordion.addItem( item1 );

Features

During instantiation (or later) the developer can set configuration options. Some of them are applicable for Accordion itself; others options apply to AccordionItems.

Among the Accordion config options:

  • reorderItems — If true, the user will be able to reorder the registered items by using drag and drop.
  • collapseOthersOnExpand — If true, Accordion will close all other items when a new item expands. This is the default behaviour.
  • useAnimation — This setting determines whether Accordion animates the process of items expanding/collapsing. If true, animation details may be set through another config property: animation.
  • resizeEvent — The developer may specify an object that provides a resize event (instead of the default browser event). For example, in the YUI 2 world if an Accordion were placed in LayoutManager the developer could use the resize event that LayoutManager provides.

Some of the AccordionItem config options:

  • contentHeight — The developer may choose among three different content height policies. These are:
    • auto — The browser will calculate content height.
    • fixed — Content height will be always X pixels, where X is a value specified by the developer.
    • stretch — The third option is to set content height to be stretched. In this case, it will be calculated later, depending on the other items and on the total size of Accordion’s container.
  • alwaysVisible — if true, the item will always stay open, even when another item is being expanded, and even if the value of Accordion’s property collapseOthersOnExpand is true.
  • closable — If true, the user will be able to remove the item from Accordion.
  • expanded — Setting this property to true or false will expand/collapse item respectively.
  • animation — Each item may have its own animation settings.

Future enhancements

I plan to do more work in the area of accessibility; I would like to see it improved in the future versions of Accordion.

About the author

YUI3 Accordion Widget
Iliyan Peychev,
Senior Software Engineer
Map Soft Ltd.

10 Comments

  1. I’m interested in using this, for sure. However, I’m having trouble setting reorderItems to false. How do I properly do this?

    Similarly, is it possible to not have all of the Drag-and-drop js files from YUI load? Would this make it faster for the user?

    Thanks for the great work!

  2. Dave,

    Set it in this way:
    var accordion = new Y.Accordion({
    reorderItems: false
    // other config properties
    });

    Drag&Drop files are required. If “combine” property in your YUI instance is true (this is the default value), they will be loaded together with the other js files.

    Iliyan

  3. Silly me…I had a typo in my script. Thanks for the help!

  4. Hi,

    I just started a website and have been attempting to learn how to add tabs to the sidebar to capture my wordpress categories and selected pages.

    I was experimenting with “Tabifier” at
    http://www.barelyfitz.com/projects/tabber/ and not having much success. I then came across Yahoo Developer and wanted to know if there is any type of paid support offered to help me over the hump with setting up tabbed sidebar navigation?

    A sample site that I’m modeling for the tabs is:
    http://www.netprofitstoday.com/blog/

    Kind Regards,
    Ken

  5. Hi Iliyan,

    Thanks for sharing your accordion YUI code. I believe I’ve discovered a bug in it.

    I took me some time to discover what it was, but you can easily replicate it, not to mention its likely to be a hot spot for other users.

    If a page has a Google AdSense snippet it fails to trigger accordion events(e.g. no collapse, etc), I have no idea why it clashes since I’m not familiar with the code base, but here is what I managed to track down.

    I noticed the accordion elements are assigned an ID upon rendering (id=”yui_3_0_0-2-125909465912878″) which I assume are used trigger the accordion events. But for some reason, having the following AdSense code snippet anywhere on the page fails to create these ids:

    This is standard JavaScript and is likely to be common in many pages. Perhaps a name clash of some sort in the accordion code? I’ve tried it with the sample page http://ipeychev.github.com/yui3-gallery/gallery-accordion/build_from_markup_window.html , if you place this Google snippet anywhere inside the page the accordion fails to trigger events.

  6. Please, create an issue here:
    http://github.com/ipeychev/yui3-gallery/issues

    I also would need an example page, which fails.

    Iliyan

  7. I’m dynamically adding items from a database. In this case the fields are TEST_%. My question is centered on the need of adding the “” to bodyContent: data[i].TEST_DESC+”" in order for the body to render. Is this a bug?

    for(var i=0; i<data.length; i++) {
    var item = new Y.AccordionItem( {
    label: data[i].TEST_NAME,
    expanded: false,
    contentBox: "dynamicContentBox2",
    contentHeight: { method: "auto" },
    bodyContent: data[i].TEST_DESC+"”
    } );
    accordion.addItem( item );
    }

  8. Update to previous post…

    The “” did not post in the text. So, the line in question is

    data[i].TEST_DESC+”“…

  9. There shouldn’t be any problems to add left and right double quotes. See this example:
    http://gist.github.com/295574

    I would suggest to check your output encoding.
    And, next time when you have questions, you would better use the official YUI3 Accordion forum:
    http://yuilibrary.com/forum/viewforum.php?f=102

    Iliyan

  10. I want to create an accordian on based roles which is going to populate from data base.Both Menus headers and sub header are alsio will be populates from database.How I will do it .Can any body suggest any apparoach.The accordian is going to added it in JSp.