UI.Accordion - Transform a set of Divs into an accordion

Synopsis

<div class="uiaccordion" id="myAccordion"/>
    <div id="element1">
        <div>First Title Bar</div>
        <div>First Titles Content</div>
    </div>
    <div id="element2">
        <div>Second Title Bar</div>
        <div>Second Titles Content</div>
    </div>
    <div id="element3">
        <div>Third Title Bar</div>
        <div>Third Titles Content</div>
    </div>
</div>

Description

UI.Accordion provides multiple or single expansion and collapsing of contents.

TODO: Enrich de expansion and collapsing of contents with visual effects and transitions.

Dependencies

Overview

[TODO]

API Reference

Class: UI.Accordion

Inherits from UI.Widget.

UI.Accordion(element, multipleExpansion=false)

Creates a new Accordion object. element parameter can be either an element or id. multipleExpansion flag can be omited, default value is false.

Properties

multipleExpansion:

Flag indicating which mode is on, multiple or single expansion.

Methods

setMultipleExpansion(flag):

Used for switching between multiple or single expansion.

expand(element):

Expands the content asociated to the title. element parameter can be either an element or id and must be a direct child of accordion element.

expandAll():

Expands all accordion contents.

collapse(element):

Collapse the content asociated to the title. element parameter can be either an element or id and must be a direct child of accordion element.

collapseAll():

Collapse all accordion contents.

Automatic widget construction details

The sintax is:

<div class="uiaccordion" ui:multiple="true|false">
<!-- Here goes accordion elements -->
</div>

Where if the ui:multiple attribute is set to "true", the resulting accordion will have multiple expansion enabled. By default, the multiple expansion is false.

Authors

Copyright

Copyright 2005-2006 Leonardo Soto M. <leo.soto@gmail.com> and Imagemaker IT <http://www.imagemaker.cl>.

This program is licensed under the CDDL v1.0 license, see http://www.sun.com/cddl/cddl.html.