Accordion Widget

Accordion Samples

This page gives examples of how to modify the behavior and style of accordions.

Default Behavior and Style
Setting the Default Panel
Enabling Keyboard Navigation
Changing Navigation Keys
Enabling Keyboard Navigation with Links
Adjusting Animation Duration and FPS
Setting the Transition/Easing of the Animation
Turning Animation Off
Variable Panel Heights
Starting with All Panels Closed
Programatically Opening and Closing Panels
Using Other Block Level Elements
Styling With Different CSS Class Names
Printing the Contents of an Accordion
Generating Accordion Markup with Spry Data

Most of the examples use this basic markup structure and JavaScript:

<script language="JavaScript" type="text/javascript" src="../../widgets/accordion/SpryAccordion.js"></script>
<link href="../../widgets/accordion/SpryAccordion.css" rel="stylesheet" type="text/css" />

...

<div id="Acc1" class="Accordion">
  <div class="AccordionPanel">
    <div class="AccordionPanelTab">Panel 1</div>
    <div class="AccordionPanelContent">

    ...

    </div>
  </div>
  <div class="AccordionPanel">
    <div class="AccordionPanelTab">Panel 2</div>
    <div class="AccordionPanelContent">

    ...

    </div>
  </div>
  <div class="AccordionPanel">
    <div class="AccordionPanelTab">Panel 3</div>
    <div class="AccordionPanelContent">

    ...

    </div>
  </div>
  <div class="AccordionPanel">
    <div class="AccordionPanelTab">Panel 4</div>
    <div class="AccordionPanelContent">

    ...

    </div>
  </div>
</div>

<script type="text/javascript">
var acc1 = new Spry.Widget.Accordion("Acc1");
</script>

Each example will show only the set of changes to the markup and JS above, that were necessary to enable the behavior.

Default Behavior and Style

This is an example of what an accordion with the markup above would look like using the default styles from SpryAccordion.css. By default, the accordion will expand horizontally to fit its parent container, unless you use CSS to constrain the width of the top-level element (div) of the Accordion. Animation is enabled by default, and the heights of all the Accordion content panels are the same.

Panel 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Panel 2

Panel 2 Content

Panel 3

Panel 3 Content

Panel 4

Panel 4 Content

Setting the Default Panel

This is an example of how to create an accordion that has its 3rd panel open by default.

Panel 1

Panel 2

Panel 2 Content

Panel 3

Panel 3 Content

Panel 4

Panel 4 Content

This is accomplished by passing the zero-based index of the panel into the Accordion's constructor with the "defaultPanel" option:

...

<script type="text/javascript">
var acc1 = new Spry.Widget.Accordion("Acc1", { defaultPanel: 2 });
</script>

Enabling Keyboard Navigation with tabindex

This is an example of an Accordion which has the ability to gain focus and has keyboard navigation enabled.

Panel 1

Panel 2

Panel 2 Content

Panel 3

Panel 3 Content

Panel 4

Panel 4 Content

To enable the ability for the accordion to gain keyboard focus and open panels via the keyboard, place a tabindex attribute on the top-level accordion div element. You can give the accordion focus by tabbing to it, or by clicking on a panel tab. After the accordion has keyboard focus, you can use the Up and Down arrow keys to switch between the different panels.

...

<div id="Acc1" class="Accordion" tabindex="0">

...

</div>

<script type="text/javascript">
var acc1 = new Spry.Widget.Accordion("Acc1");
</script>

Changing Navigation Keys

This is an example of how to override the default up/down arrow key codes used for navigating. The accordion below uses the 'n' and 'p' keys to open the next or previous panel.

Panel 1

Panel 2

Panel 2 Content

Panel 3

Panel 3 Content

Panel 4

Panel 4 Content

To override the default key codes, specify the new keycodes with the "nextPanelKeyCode" and "previousPanelKeyCode" Accordion constructor options:

...


<script type="text/javascript">

// Keycode for 'n' is 78
// Keycode for 'p' is 80

var acc1 = new Spry.Widget.Accordion("Acc1", { nextPanelKeyCode: 78, previousPanelKeyCode: 80 });

</script>

Enabling Keyboard Navigation with Links

This is an example of an Accordion that uses <a> tags within its AccordionPanelTab elements to enable keyboard navigation via the tab key. 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.

Panel 2 Content

Panel 3 Content

Panel 4 Content

To enable this behavior, remove any tabindex attribute that may be on the top-level Accordion element, and simply embed your <a> tags in the panel tab:

...

<style type="text/css">

.AccordionPanelTab a {
	display: block;
	color: black;
	text-decoration: none;
}

</style>

...

<div id="Acc1" class="Accordion">
  <div class="AccordionPanel">
    <div class="AccordionPanelTab"><a href="#p1">Panel 1</a></div>
    <div id="p1" class="AccordionPanelContent">

    ...

    </div>
  </div>
  <div class="AccordionPanel">
    <div class="AccordionPanelTab"><a href="#p2">Panel 2</a></div>
    <div id="p2" class="AccordionPanelContent">

    ...

    </div>
  </div>
  <div class="AccordionPanel">
    <div class="AccordionPanelTab"><a href="#p3">Panel 3</a></div>
    <div id="p3" class="AccordionPanelContent">

    ...

    </div>
  </div>
  <div class="AccordionPanel">
    <div class="AccordionPanelTab"><a href="#p4">Panel 4</a></div>
    <div id="p4" class="AccordionPanelContent">

    ...

    </div>
  </div>
</div>
<script type="text/javascript">
var acc1 = new Spry.Widget.Accordion("Acc1", { enableKeyboardNavigation: false });
</script>

The "enableKeyboardNavigation: false" constructor option is necessary to get around the problem in IE where querying for the presence of the tabindex attribute, via the DOM API, always reports that one exists, even if it is not in the markup.

Note that the example above is setup so that clicking on the links when JavaScript is disabled, takes you to the AccordionPanelContent immediately below the AccordionPanelTab.

Adjusting Animation Duration and FPS

This is an example of how to change the duration and/or the frames per second (fps) of the Accordion's open/close panel animation.

Panel 1

Panel 2

Panel 2 Content

Panel 3

Panel 3 Content

Panel 4

Panel 4 Content

You can pass the duration of the animation in milliseconds using the "duration" constructor. You can also adjust the frame rate (fps) by specifying the number of frames per second:

...

<script type="text/javascript">
var acc1 = new Spry.Widget.Accordion("Acc1", { duration: 250, fps: 90 });
</script>

Setting the Transition/Easing of the Animation

The Accordion's panel animation code uses a transition function to calculate the size of the panel at each frame of the open/close animation. The signature of this function matches the signature of the transition functions defined in SpryEffects.js and in Robert Penner's Easing Library. This means that it is possible to use a transition function from either of those libraries to animate the Accordion panels.

Panel 1

Panel 2

Panel 2 Content

Panel 3

Panel 3 Content

Panel 4

Panel 4 Content

To change the transition function, you simply include the JS file that defines the function and pass the function into the Accordion's constructor with the "transition" option:

<script language="JavaScript" type="text/javascript" src="../../widgets/accordion/SpryEffects.js"></script>
<script language="JavaScript" type="text/javascript" src="../../widgets/accordion/SpryAccordion.js"></script>
<link href="../../widgets/accordion/SpryAccordion.css" rel="stylesheet" type="text/css" />

...

<script type="text/javascript">
var acc1 = new Spry.Widget.Accordion("Acc1", { transition: Spry.circleTransition });
</script>

Turning Animation Off

This is an example of an accordion with panel animations turned off.

Panel 1

Panel 2

Panel 2 Content

Panel 3

Panel 3 Content

Panel 4

Panel 4 Content

This is accomplished by passing a false value for the "enableAnimation" constructor option. :

...

<script type="text/javascript">
var acc1 = new Spry.Widget.Accordion("Acc1", { enableAnimation: false });
</script>

Variable Panel Heights

This is an example of how to create an accordion with varying panel heights.

Panel 1

Panel 2

Panel 3

Panel 4

You enable variable height panels by passing a false as the value of the "useFixedPanelHeights" constructor option:

...

<script type="text/javascript">
var acc1 = new Spry.Widget.Accordion("Acc1", { useFixedPanelHeights: false });
</script>

In this mode, the Accordion automatically sizes the height of each content panel to fit all of the content within it.

Starting with All Panels Closed

This is an example of how to create an accordion that is initially closed.

Panel 1

Panel 2

Panel 3

Panel 4

This feature is only supported when using variable height panels, so you must pass a false into the Accordion's constructor for the "useFixedPanelHeights" constructor option, and a -1 for the "defaultPanel" option:

...

<script type="text/javascript">
var acc1 = new Spry.Widget.Accordion("Acc1", { useFixedPanelHeights: false, defaultPanel: -1 });
</script>

Programatically Opening and Closing Panels

This is an example of how to programatically open or close the panels of an Accordion. Click on the links below to manipulate the accordion below:

Open by Simple Navigation: First | Previous | Next | Last

Open by Panel Index: 0 | 1 | 2 | 3

Open by Panel ID: panel1 | panel2 | panel3 | panel4

Close: Current Panel

Panel 1

Panel 2

Panel 3

Panel 4

Note that the programatic closing of the current panel is only supported when using variable height panels. Here's the code for the example above:

...

<p>Open by Simple Navigation:
  <a href="#" onclick="acc1.openFirstPanel(); return false;">First</a> |
  <a href="#" onclick="acc1.openPreviousPanel(); return false;">Previous</a> |
  <a href="#" onclick="acc1.openNextPanel(); return false;">Next</a> |
  <a href="#" onclick="acc1.openLastPanel(); return false;">Last</a>
</p>

<p>Open by Panel Index:
  <a href="#" onclick="acc1.openPanel(0); return false;">0</a> |
  <a href="#" onclick="acc1.openPanel(1); return false;">1</a> |
  <a href="#" onclick="acc1.openPanel(2); return false;">2</a> |
  <a href="#" onclick="acc1.openPanel(3); return false;">3</a>
</p>

<p>Open by Panel ID:
  <a href="#" onclick="acc1.openPanel('panel1'); return false;">panel1</a> |
  <a href="#" onclick="acc1.openPanel('panel2'); return false;">panel2</a> |
  <a href="#" onclick="acc1.openPanel('panel3'); return false;">panel3</a> |
  <a href="#" onclick="acc1.openPanel('panel4'); return false;">panel4</a>
</p>

<p>Close:
  <a href="#" onclick="acc1.closePanel(); return false;">Current Panel</a>
</p>

<div id="Acc1" class="Accordion" tabindex="0">
  <div id="panel1" class="AccordionPanel">

  ...

  </div>
  <div id="panel2" class="AccordionPanel">

  ...

  </div>
  <div id="panel3" class="AccordionPanel">

  ...

  </div>
  <div id="panel4" class="AccordionPanel">

  ...

  </div>
</div>

<script type="text/javascript">
var acc1 = new Spry.Widget.Accordion("Acc1", { useFixedPanelHeights: false });
</script>

Using Other Block Level Elements

This example demonstrates the ability to use other block level elements, other than divs, to build the structure of an Accordion. It dosen't matter what tags are used to build up the structure of the Accordion. What does matter is that the elements that make up the structure are styled as block elements, and that they are properly nested.

Panel 1

Panel 2

Panel 2 Content

Panel 3

Panel 3 Content

Panel 4

one
two
three

<script language="JavaScript" type="text/javascript" src="../../widgets/accordion/SpryAccordion.js"></script>
<link href="../../widgets/accordion/SpryAccordion.css" rel="stylesheet" type="text/css" />

<style type="text/css">

span.AccordionPanelContent {
  display: block;
}

</style>

...

<div id="Acc1" class="Accordion" tabindex="0">
  <div class="AccordionPanel">
    <h3 class="AccordionPanelTab">Panel 1</h3>
    <span class="AccordionPanelContent">

    ...

    </span>
  </div>
  <div class="AccordionPanel">
    <h2 class="AccordionPanelTab">Panel 2</h2>
    <p class="AccordionPanelContent">

    ...

  </p>
  </div>
  <div class="AccordionPanel">
    <p class="AccordionPanelTab">Panel 3</p>
    <p class="AccordionPanelContent">

    ...

    </p>
  </div>
  <div class="AccordionPanel">
    <pre class="AccordionPanelTab">Panel 4</pre>
    <ol class="AccordionPanelContent">
      <li>

      ...

      </li>
    </ol>
  </div>
</div>

<script type="text/javascript">
var acc1 = new Spry.Widget.Accordion("Acc1");
</script>

Styling With Different CSS Class Names

This is an example of styling an accordion using totally different class names than the ones specified in SpryAccordion.css. This example also shows how to override the built-in CSS class names used by the hover, panel open, panel closed, and accordion focused behaviors.

Panel 1

Panel 2

Panel 2 Content

Panel 3

Panel 3 Content

Panel 4

Panel 4 Content

The code for this (minus the panel content) looks like this:

<script language="JavaScript" type="text/javascript" src="../../widgets/accordion/SpryAccordion.js"></script>
<link href="../../widgets/accordion/SpryAccordion.css" rel="stylesheet" type="text/css" />

<style type="text/css">

.AquaAccordion {
	border-left: solid 1px gray;
	border-right: solid 1px black;
	border-bottom: solid 1px gray;
	overflow: hidden;
	font-family: "Times New Roman", Times, serif;
	font-size: 16px;
}

.AquaAccordion .Tab {
	height: 24px;
	background-image: url(images/aqua-gradient.gif);
	background-repeat: repeat-x;
	background-color: #6dc1fc;
	border-top: solid 1px black;
	border-bottom: solid 1px gray;
	margin: 0px;
	padding: 2px;
	cursor: pointer;
	-moz-user-select: none;
	-khtml-user-select: none;
	text-align: center;
}

.AquaAccordion .Content {
	overflow: auto;
	height: 300px;
	margin: 0px;
	padding: 0px;
	background-image: url(images/gray-gradient.gif);
	background-repeat: repeat-x;
}

.AquaAccordion .hover {
	background-image: none;
	background-color: #33CCFF;
}

.AquaAccordion .open {
	/* Add properties here. */
}

.AquaAccordion .closed {
	/* Add properties here. */
}

.AquaAccordion .focused {
	/* Add properties here. */
}

</style>

...

<div id="Acc9" class="AquaAccordion" tabindex="0">
  <div class="Panel">
    <div class="Tab">
      <div class="Label">Panel 1</div>
    </div>
    <div class="Content">

    ...

    </div>
  </div>
  <div class="Panel">
    <div class="Tab">Panel 2</div>
    <div class="Content">

    ...

    </div>
  </div>
  <div class="Panel">
    <div class="Tab">Panel 3</div>
    <div class="Content">

    ...

    </div>
  </div>
  <div class="Panel">
    <div class="Tab">Panel 4</div>
    <div class="Content">

    ...

    </div>
  </div>
</div>

<script type="text/javascript">
var acc1 = new Spry.Widget.Accordion("Acc1", { hoverClass: "hover", openClass: "open", closedClass: "closed", focusedClass: "focused" });
</script>

Printing the Contents of an Accordion

When printing a document that contains an Accordion, it may sometimes be desireable to print the content in content panels that are currently closed on screen. To do this, you need to add some CSS print media style rules which force the Accordion panels to show all their content:

<link href="../../css/samples.css" rel="stylesheet" type="text/css" />
<link href="../../widgets/accordion/SpryAccordion.css" rel="stylesheet" type="text/css" />

<style type="text/css" media="print">

.Accordion {
  overflow: visible !important;
}

.AccordionPanelContent {
  display: block !important;
  overflow: visible !important;
  height: auto !important;
}

</style>

The "!important" on these rules is necessary because the Accordion widget places inline styles on the actual AccordionPanelContent elements when opening and closing them. Since inline styles have a higher CSS specificity then CSS class rules, "!important" is necessary to "trump" the inline styles.

Generating Accordion Markup with Spry Data

To see an example of how to build an accordion from XML data using Spry's Data Set and Dynamic Region support, click here.