Yahoo! User Interface Blog (YUIBlog)

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

accordion.render();

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 );

9 Comments »

RSS feed for comments on this post. TrackBack URI

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!

   Comment by Dave — November 4, 2009 #

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

   Comment by Iliyan Peychev — November 4, 2009 #

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

   Comment by Dave — November 4, 2009 #

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

   Comment by Ken — November 9, 2009 #

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.

   Comment by Daniel R — November 24, 2009 #

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

   I also would need an example page, which fails.

   Iliyan

   Comment by Iliyan Peychev — December 17, 2009 #

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 );
   }

   Comment by hue — February 4, 2010 #

8. Update to previous post…

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

   data[i].TEST_DESC+”“…

   Comment by hue — February 4, 2010 #

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

   Comment by Iliyan Peychev — February 4, 2010 #