Accordion
An expandable/collapsible content pane. Applicable when content must be displayed within limited space.
Demo
Source Code
<div control="jquery_accordion" id="myAccordion"> <div id="head1" title="Header 0"> Content... </div> <div id="head2" title="Header 1"> Content... </div> <div id="head3" title="Header 2"> Content... </div> </div>
Script Example
The following demonstrates how to create the control from JavaScript…
App.createControl( 'myAccordion', 'jquery_accordion', { property: "rows", animated: "bounceslide" }, function() { this.addRow({ title: "Row0", content: "Hello, World.", id: "newTab0" }); this.addRow({ title: "Row3", url: "assets/content1.html", id: "newTab3", index: 2, insert: "before" }); this.addRow({ title: "Row4", url: "assets/content1.html", id: "newTab4", index: 1, insert: "before" }); this.addRow({ title: "Row5", url: "assets/content2.html", id: "newTab5", insert: "after" }); } );
Get the handle to an instance of the control…
App.getControl('myAccordion', 'jquery_accordion', function() { this.addRow({ title: "Dynamic Row", content: "Appcelerate!" }); this.deleteRow(0); });
Options
The accordion control is made up of a container div and a single level of divs within that container which will constitute it's rows when it is rendered. The control tag on the div indicates what kind of widget the div will become. The widget identity can accept the following initial parameters…
Initial options supported by the widget.
| Option | Description | Default | Type |
|---|---|---|---|
| active | Selector for the active element. Set to false to display none at start. (Requires the parameter alwaysOpen to be set to false). | first child | String |
| alwaysOpen | Whether there must be one content element open. Allows collapsing the active section by the triggering event (click is the default). | false | Bool |
| animated | Choose your favorite animation, or disable them (set to false). In addition to the default, 'bounceslide' and 'easeslide' are supported. | slide | String |
| autoHeight | If set, clears height and overflow styles after finishing animations. This enables accordions to work with dynamic content. Won't work together with autoheight. | false | Bool |
| clearStyle | If set, the highest content part is used as height reference for all other parts. Provides more consistent animations. | false | Bool |
| event | The event on which to trigger the accordion. | click | String |
| fillSpace | If set, the accordion completely fills the height of the parent element. Overrides autoheight. | false | Bool |
| header | Selector for the header element. | h3.ui-accordion-header | String |
| navigation | If set, looks for the anchor that matches location.href and activates it. Great for href-based state-saving. Use navigationFilter to implement your own matcher. | false | Bool |
| selectedClass | The class to apply to the row header that is currently selected. | String | selected |
Actions/JavaScript API
Functions either accept a single argument such as an integer or a string, otherwise they accept a one dimensional object literal. Any function that can be called as an action accepts the same parameters but in the action parameter format. For example…
this.loadHTML({ index: 1, url: "myFile.html" });
is equivalent to…
<div control="jquery_accordion" id="myAccordian2" on="l:loadMe then loadHTML[index=1, url='myFile.html']"> </div>
| Function | Action | Description |
|---|---|---|
| addRow(obj) | addrow[] | Add a row to the accordion. |
| deleteRow(int) | deleterow[] | Delete a row from the accordion. |
| render() | render | Invoke a render on the accordion. |
| title(obj) | title[] | Change the title of a row based on its index. The function accepts an object literal with two members; “index” (int), and “value” (string). The action accepts the two parameters with the same names and types. |
| enable() | enable | Enable the selected accordion. |
| disable() | disable | Disable the selected accordion. |
| hideRow(int) | hiderow[] | Hides a row based on its index. |
| content(obj) | content[] | Change the content of a row based on its index. The function accepts an object literal with two members; “index” (int), and “value” (string). The action accepts the two parameters with the same names and types. |
| showRow(int) | showrow[] | Shows a row based in its index. |
| activate(int) | activate[] | Activates a row based on its index. |
| remove(int) | remove[] | Removes a row based on its index. |
| loadHTML(obj) | loadhtml[] | Load html into a row based on its index. The function accepts an object literal with two members; “index” (int), and “value” (string). The action accepts the two parameters with the same names and types. |
