YUILibrary - Open source JavaScript and CSS for building richly interactive software.
Fork YUI on GitHub
  • Home
  • Gallery
  • Forums
  • YUI 2
  • YUI 3
  • YUI Labs
  • YUI Compressor
  • More
  • Gallery Forums
  • Gallery Stats
  • Gallery Calendar
  • Register
  • Login

Modules

  • Home
  • Featured
  • Popular
  • New
  • All

Documentation

  • FAQ
  • Developer FAQ
  • Developer Guide
  • Module Setup

Tag Cloud

overlay port davglass slideshow lsmith jafl event ericf node io apipkin ajax yui2 caridy tivac rgrove nzakas skinnable widget adam plugin form animation foxxtrot jsonp jacobfogg

Context Navigation

    YUI Library is not responsible for bugs or support with this module. It is available as a free service. For support please contact the module owner with the provided links.

    Accordion (gallery-accordion) on cdn

    Last Updated: 06/11/10
    + 15 -

    Iliyan Peychev

    YUI Contributor

    See 1 more by this user.

    Featured Item

    Created: 10/23/09
    Last CDN Push: 06/9/10
    Build Tag: gallery-2010.06.09-20-45
    Project: YUI 3
    License: YUI BSD
    YUI Version: 3.1.1
    Free for use.
    Accordion is a visual widget that allows the expansion/collapse of grouped items containing arbitrary data.
    These items can be:
    • added or removed dynamically
    • closed
    • set as always visible
    • reordered via drag and drop.
    http://farm3.static.flickr.com/2707/4038539087_6ee055de0e.jpg
    • Tags:
    • accordion
    • Download
    • Docs
    • Homepage
    • Bugs
    • Source
    • Example
    • Forum
    • History

    Build Accordion from script and add three items dynamically.

    Code Sample

    <script src="http://yui.yahooapis.com/3.1.0/build/yui/yui-min.js"></script>
    YUI({
        //Last Gallery Build of this module
        gallery: 'gallery-2010.06.09-20-45'
    }).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",
                height: 80
            },
            closable: true
        } );
     
        item1.set( "bodyContent", "This is the body of the item, added dynamically to accordion.<br>Content height has been set as \"fixed, 80px\"." );
     
        accordion.addItem( item1 );
     
        item2 = new Y.AccordionItem( {
            label: "Item2, added from script",
            expanded: true,
            id: "dynamicItem2",
            contentHeight: {
                method: "stretch"
            }
        } );
     
        item2.set( "bodyContent", "This is the body of the item, added dynamically to accordion, before item1.<br>Content height has been set as \"stretch\"." );
     
        accordion.addItem( item2, item1 );
     
        item3 = new Y.AccordionItem( {
            label: "Item3, added from script",
            expanded: true,
            alwaysVisible: true,
            id: "dynamicItem3",
            contentHeight: {
                method: "auto"
            }
        } );
     
        item3.set( "bodyContent", "<div style='position:relative;'>This is the body of the item, added dynamically to accordion.<br>Content height has been set as \"auto\".</div>" );
     
        accordion.addItem( item3 );
     
    });

    Forum Posts

    Subject Author Date
    w3c validation fails Jeff Flesher 11/3/09
    Re: w3c validation fails Iliyan Peychev 11/4/09
    Re: w3c validation fails Iliyan Peychev 11/10/09
    Scrollable KReiss 12/15/09
    Re: Scrollable Iliyan Peychev 12/16/09
    Re: Scrollable KReiss 12/16/09
    Re: Scrollable Iliyan Peychev 12/16/09
    Forcing an item to expand alexlebek 01/14/10
    Re: Forcing an item to expand Iliyan Peychev 01/14/10
    Re: Forcing an item to expand alexlebek 01/15/10
    YUI Projects
    • All YUI Downloads
    • YUI 2
    • YUI 3
    • YUI Doc
    • YUI Compressor
    • YUILibrary.com
    • YUI Build Tool
    • YUI PHP Loader
    YUI Labs
    • All YUI Labs Projects
    • Yeti
    Pages & Links
    • All YUI Downloads
    • Git FAQ
    • Graded Browser Support
    • Contribute to YUI
    • Forum Stats
    • Gallery Stats
    • YUI Calendar
    Contribute
    • Submit a Bug
    • Request a Feature
    • Write Code
    • Meet the Team
    Follow YUI
    • on GitHub
    • on Twitter
    • on FriendFeed
    • on Facebook
    • on IRC
    • YUI Blog
    • YUI Theater
    • YUI Forums

    © 2010 YUI Library - Site Credits