The Spry Accordion is a disclosure widget that consists of a series of panels, each with a clickable tab and a content panel. Clicking on a tab will reveal the contents of that panel.
The widget structure is as follows:
<widget container>
<panel container>
<tab container>
<content container>
</panel container>
<panel container>
<tab container>
<content container>
</panel container>
</widget container>
The accordion can have as many panels as needed.
The markup used in this structure can be most any HTML, as long as it follows the rules for nesting.
Using the provided files, the default mark up is:
<div id="Accordion1" class="Accordion" tabindex="0">
<div class="AccordionPanel">
<div class="AccordionPanelTab">Label 1</div>
<div class="AccordionPanelContent">Content 1</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Label 2</div>
<div class="AccordionPanelContent">Content 2</div>
</div>
</div>
<script type="text/javascript">
var Accordion1 = new Spry.Widget.Accordion("Accordion1");
</script>
Widget Constructors are small pieces of javascript that activate the markup into the working widget. These scripts must come AFTER the markup on the page, since the markup needs to exist before the constructor fires.
<script type="text/javascript">
var Accordion1 = new Spry.Widget.Accordion("Accordion1");
</script>
A basic constructor specifies the name of the widget and identifies the ID of the main markup container. The name of the widget is used to identify the widget for functions and methods.
<script type="text/javascript"> var widgetname = new Spry.Widget.Accordion("id of widget container"); </script>
Constructor options allow users to specify certain attributes of the widget.
Constructor options follow the ID parameter, wrapped in curly braces {}. Options are name:value pairs, separated by a colon (:).
<script type="text/javascript">
var widgetname = new Spry.Widget.Accordion("id of widget container",{option1:value, option2:value, option3:"value"});
</script>
| Option | Values | Default | Description |
|---|---|---|---|
| closedClass | CSS class name | null | This class will be applied to the content panel as it is closing. |
| defaultPanel | number | 0 | The topmost panel will be initially displayed by default. This option is used to set a non-default panel to be open when the page loads. Spry uses a zero-based counting system, so 0 is the first panel and 1 is the second, etc. |
| duration | number of milliseconds | 500 milliseconds | Duration defines how long it will take to open a panel, no matter the distance. |
| enableAnimation | true or false no quotes around values |
true | By default, the panels will change by sliding the up or down to reveal the content. Setting enableAnimation:false will turn off the animation and the panels will instantly open and shut. |
| enableKeyboardNavigation | true or false no quotes around values |
true | In the case where <a> tags are used in the tabs to control panel navigation, turning off keyboard navigation allows the <a> tags to control. To open a tab, use the tab key until the link in the panel tab is selected, then hit the return key to activate it. |
| focusedClass | CSS class name | This class will be applied to the accordion when it had focus in the browser | |
| fps | number | 60 | Determines the frames per second of the panel animation. This may be raised if the panel animation is not smooth enough. This may occur if the panel has a lot of content. |
| hoverClass | CSS class name | This class will be applied when hovering over the accordion tab. | |
| nextPanelKeyCode | numbers | null | This option allows the user to assign a specific key to go to the next (lower) panel. Keyboard code numbers are described here. The value of the option is the keyboard code number. |
| openClass | CSS class name | This class we will applied to the content panel when it is open. | |
| previousPanelKeyCode | numbers | null | This option allows the user to assign a specific key to go to the previous (upper) panel. Keyboard code numbers are described here. The value of the option is the keyboard code number. |
| transition | name of transition function | easeOut | Determines the acceleration profile of the transition. |
| useFixedPanelHeights | true or false no quotes around values |
true | By default, accordions are designed to fit into a fixed height and the panels will scroll if the content is longer than the available window. Setting useFixedPanelHeights:false will allows the accordion to resize its height to show all the panel content without scrollbars.
|
<script type="text/javascript">
var ac1 = new Spry.Widget.Accordion("myAccordion",{defaultPanel:2, openClass:"myClass", nextPanelKeyCode:78, duration:800, useFixedPanelHeights:true});
</script>
Recall that javascript is case sensitive.
Starting with all panels closed
To start the accordion with all panels closed, set useFixedPanelHeights:false and defaultPanel:-1
<script type="text/javascript">
var ac1 = new Spry.Widget.Accordion("myAccordion",{useFixedPanelHeights:false, defaultPanel:-1});
</script>
Closes the open panel in the accordion.
This method is only used when useFixedPanelHeights is set to false. Otherwise, the accordion will always have an open panel.
accordionName.closePanel();
<a href="#" onclick="acc1.closePanel(); return false;">Current Panel</a>
Returns the panel container element of the current panel.
accordionName.getCurrentPanel();
var ele = acc1.getCurrentPanel();
Returns the panel number of the current panel. Panel numbers are zero based, so the panel number for the first panel in the accordion is 0, the next one is 1, etc.
accordionName.getCurrentPanelIndex();
var panelNumber = acc1.getCurrentPanelIndex();
Returns the content container element for the specified panel element.
accordionName.getPanelContent(panelElement);
// Get the container element for the 3rd panel in // the accordion. var panelArray = acc1.getPanels(); var contentElement = acc1.getPanelContent(panelArray[2]);
Returns the panel number of the specified panel container element. Panel numbers are zero-based, so the panel number for the first panel in the accordion is zero(0).
accordionName.getPanelIndex(panelElement);
// Get the current panel element and figure out what its // panel number is: var ele = acc1.getCurrentPanel(); var panelNumber = acc1.getPanelIndex(ele);
Returns an array containing all of the panel container elements inside the accordion.
accordionName.getPanels();
var panelsArray = acc1.getPanels();
// Iterate over all the panel elements in the array.
for (var i = 0; i < panelsArray.length; i++)
{
var ele = panelsArray[i];
...
}
Returns the tab container element for the specified panel element.
accordionName.getPanelTab(panelElement);
// Get the tab element for the 3rd panel in // the accordion. var panelArray = acc1.getPanels(); var tabElement = acc1.getPanelTab(panelArray[2]);
Opens the first (topmost) panel in the accordion.
accordionName.openFirstPanel();
<a href="#" onclick="acc1.openFirstPanel(); return false;">First</a>
Opens the last (lowest) panel in the accordion.
accordionName.openLastPanel();
<a href="#" onclick="acc1.openLastPanel(); return false;">Last</a>
Opens the next (lower) panel in the accordion.
accordionName.openNextPanel();
<a href="#" onclick="acc1.openNextPanel(); return false;">Next</a>
Opens the specified panel in the accordion.
accordionName.openPanel(panelNumberOrID);
panelNumberOrID - Number or String. If a number is passed into openPanel, it is assumed to be the panel number. Panels are numbered from top to bottom, beginning with zero (0). If a string is passed into openPanel, it is assumbed to be the ID of the panel container element.
//Open the first panel of the accordion:
<a href="#" onclick="acc1.openPanel(0); return false;">0</a>
// Open the panel with an id of "panel2":
<a href="#" onclick="acc1.openPanel('panel2'); return false;">Panel 2</a>
Opens the preceeding (above) panel in the accordion.
accordionName.openPreviousPanel();
<a href="#" onclick="acc1.openPreviousPanel(); return false;">Previous</a>
Copyright © 2007. Adobe Systems Incorporated.
All rights reserved.