Gallery

Overview

The Accordion Node Plugin makes it easy to transform existing markup into an accordion element with expandable and collapsible elements. Elements are easy to customize, and only require a small set of dependencies.

To use the Accordion Node Plugin, simply pass a reference to the plugin to a Node instance's plug method.

Usage

// Call the "use" method, passing in "gallery-node-accordion". This will 

// load the script and CSS for the Accordion Node Plugin and all of 

// the required dependencies. 

YUI().use("gallery-node-accordion", function(Y) { 

  // Use the "contentready" event to initialize the accordion when 

  // the element that represente the accordion 

  // (<div id="accordion1">) is ready to be scripted. 

  Y.on("contentready", function () { 

    // Callback scope will be a Node instance for (<div id="accordion1">). 

    // Therefore, since "this" represents a Node instance, it 

    // is possible to just call "this.plug". 

    this.plug(Y.Plugin.NodeAccordion); 

  }, "#accordion1"); 

});

The Accordion Node Plugin has several configuration properties that can be set via an object literal that is passed as a second argument to a Node instance's plug method.

// Including animation module to support smooth transitions 

YUI().use("gallery-node-accordion", "anim", function(Y) { 

  // Passing a second argument to customize some attributes

  Y.one('#accordion2').plug(Y.Plugin.NodeAccordion, { 

    anim: true, 

    effect: Y.Easing.backIn 

  }); 

});

It also has several configuration properties that can be set via an object literal that is passed as a second argument to a Node instance's plug method. More attributes and other details here:

• http://caridy.github.com/api/gallery-node-accordion/plugin.NodeAccordion.html

Examples

• [http://caridy.github.com/examples/gallery-node-accordion/accordion-with-skin.html Accordion using the default skin + Easing animation]
• [http://caridy.github.com/examples/gallery-node-accordion/custom-style.html Custom skin + custom properties]
• [http://caridy.github.com/examples/gallery-node-accordion/horizontal.html Horizontal Accordions (beta)]
• [http://caridy.github.com/examples/gallery-node-accordion/accordion-mouseenter-mouseleave.html Accordion using synthetic events (mouseenter/mouseleave) to expand and collapse elements]

Tests

Run this test in your browser and report any issue.

• http://caridy.name/sandbox/yui3-gallery/src/gallery-node-accordion/tests/node-accordion.html

Note: Make sure you include OS, Browser Version and the test result from YUI Console in your ticket.

CHANGELOG

Check the latest changes in this module.

• http://github.com/caridy/yui3-gallery/tree/master/src/gallery-node-accordion/