YUI3: Accordion Examples

Here is a ready three examples of YUI3 Accordions. Last one is the trimmed version so that you can use your own styles on it. I am presenting simplest code here which is the last one.

Working Demo of the Simple Accordion. There you will find link to 2nd example. That gives more info about the possibilities in the code.

HTML parts:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title> YUI3 Accordion Examples </title>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/combo?3.5.1/build/cssreset/reset-min.css&3.5.1/build/cssfonts/fonts-min.css">
<script src="http://yui.yahooapis.com/3.5.1/build/yui/yui-min.js"></script>
<!-- some css will go here -->
</head>
<body  >
	<h1>YUI3 Accordion Test</h1>
<div style="position: absolute; left: 50px; top: 50px; width: 350px; height: 150px;"> <!-- Height is req when you use stretch method for items. -->
	<div id="acc1">
	</div>
<!-- YUI3 Js will go here -->
</div>
</body>
</html>

Style part:

<style>
/* I need to extract some CSS from sam skin CSS file to make Accordion work. http://yui.yahooapis.com/gallery-2011.03.23-22-20/build/gallery-accordion/assets/skins/sam/gallery-accordion.css */
.yui3-accordion{width:100%;height:100%;overflow:hidden;position:relative}.yui3-accordion-item{position:relative;cursor:pointer;width:100%}.yui3-accordion-item .yui3-widget-hd{overflow:hidden}.yui3-accordion-item .yui3-widget-bd{cursor:default;overflow:hidden;position:relative}.yui3-accordion-item-icons{position:relative;float:right;overflow:hidden;padding:1px;height:25px}.yui3-accordion-item-icon,.yui3-accordion-item-iconexpanded,.yui3-accordion-item-iconalwaysvisible,.yui3-accordion-item-iconclose{width:22px;height:22px}.yui3-accordion-item-icon,.yui3-accordion-item-label{float:left}.yui3-accordion-item-label{position:relative;top:4px;_height:22px}.yui3-accordion-item-iconexpanded,.yui3-accordion-item-iconalwaysvisible,.yui3-accordion-item-iconclose{float:left}.yui3-accordion-item-iconclose-hidden{display:none}
</style>

JavaScript Part:


<script type="javascript">
	YUI({
	    gallery : 'gallery-2011.03.23-22-20'
	}).use('gallery-accordion', function(Y) {
	    var item1, item2, item3, accordion;
	    accordion = new Y.Accordion({
	        srcNode: "#acc1",
	        useAnimation: true,
	        collapseOthersOnExpand: true
	    });
	    accordion.render();
	    item1 = new Y.AccordionItem( {
	        label: "Item1, added from script",
	        expanded: true,
	        id: "dynamicItem1",
	        contentHeight: {
	            method: "fixed", /* auto does not work correctly and stretch works. For stretch, set the correct height of parent, so that it does not create too long vertical space. */
				height: 60
	        },
	    } );
	    item1.set( "bodyContent", "This is the body of the item1, added dynamically to accordion." );
	    accordion.addItem( item1 );
	    item2 = new Y.AccordionItem( {
	        label: "Item2, added from script",
	        id: "dynamicItem2",
	        contentHeight: {
	            method: "fixed",
				height: 60
	        },
	    } );
	    item2.set( "bodyContent", "This is the body of the item2, added dynamically to accordion." );
	    accordion.addItem( item2 );
	    item3 = new Y.AccordionItem( {
	        label: "Item3, added from script",
	        id: "dynamicItem3",
	        contentHeight: {
	            method: "fixed",
					height: 60
	        },
	    } );
	    item3.set( "bodyContent", "<div style='position:relative;'>This is the body of the item3, added dynamically to accordion.</div>" );
	    accordion.addItem( item3 );
	});
	</script>

Observations:

  • Accordion code is in Gallery only. So, CSS for this need to be included here:

    http://yui.yahooapis.com/gallery-2011.03.23-22-20/build/gallery-accordion/assets/skins/sam/gallery-accordion.css

    But I do not want to use this full CSS file as this is having many lines of code I do not need. So, I have extracted required one from here. CSS above given was from here.

  • I saw that Auto method does not work correctly but stretch works. For stretch, set the correct height of parent, so that it does not create too long vertical space.
  • Setting Gallery is required for loading default CSS. This is unexpected as I read that default skin (sam) css will be loaded automatically. But it was not when I have tested it. Error getting was :
    "y.queryAll is not a function".
    Also, for it to apply on the widget, skin class name (class="yui3-skin-sam") must either be there in body or in widget parent.

Now, how to create Accordion with Static HTML? I have not seen any example on net.