Accordion widget overview and structure

An Accordion widget is a set of collapsible panels that can store a large amount of content in a compact space. Site visitors hide or reveal the content stored in the accordion by clicking the tab of the panel. The panels of the accordion expand or contract accordingly as the visitor clicks different tabs. In an accordion, only one content panel is open and visible at a given time. The following example shows an Accordion widget, with the first panel expanded:

View full size graphic

A.: Accordion panel tab
B.: Accordion panel content
C.: Accordion panel (open)

The default HTML code for the Accordion widget comprises an outer div tag that contains all of the panels, a div tag for each panel, and a header div and content div within the tag for each panel. An Accordion widget can contain any number of individual panels. The HTML code for the Accordion widget also includes script tags in the head of the document and after the accordion’s HTML code.

The script tag in the head of the document defines all of the JavaScript functions related to the Accordion widget. The script tag after the Accordion widget code creates a JavaScript object that makes the accordion interactive. Following is the HTML code for an Accordion widget:

<head>
...
	<!--Link the CSS style  sheet that styles the accordion-->
	<link href="SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css" />
	<!--Link the Spry Accordion JavaScript library-->
	<script src="SpryAssets/SpryAccordion.js" type="text/javascript"></script>
</head>
<body>
	<!--Create the Accordion widget and assign classes to each element-->
	<div id="Accordion1" class="Accordion">
		<div class="AccordionPanel">
			<div class="AccordionPanelTab">Panel 1</div>
			<div class="AccordionPanelContent">
				Panel 1 Content<br/>
				Panel 1 Content<br/>
				Panel 1 Content<br/>
			</div>
		</div>
		<div class="AccordionPanel">
			<div class="AccordionPanelTab">Panel 2</div>
			<div class="AccordionPanelContent">
				Panel 2 Content<br/>
				Panel 2 Content<br/>
				Panel 2 Content<br/>
			</div>
		</div>
		<div class="AccordionPanel">
			<div class="AccordionPanelTab">Panel 3</div>
			<div class="AccordionPanelContent">
				Panel 3 Content<br/>
				Panel 3 Content<br/>
				Panel 3 Content<br/>
			</div>
		</div>
		<div class="AccordionPanel">
			<div class="AccordionPanelTab">Panel 4</div>
			<div class="AccordionPanelContent">
				Panel 4 Content<br/>
				Panel 4 Content<br/>
				Panel 4 Content<br/>
			</div>
		</div>
	</div>
<!--Initialize the Accordion widget object-->
<script type="text/javascript">
	var Acc1 = new Spry.Widget.Accordion("Accordion1");
</script>
</body>

In the code, the new JavaScript operator initializes the Accordion widget object, and transforms the div content with the ID of Accordion1 from static HTML code into an interactive page element. The Spry.Widget.Accordion method is a constructor in the Spry framework that creates accordion objects, and the information necessary to initialize the object is contained in the SpryAccordion.js JavaScript library that you linked to in the head of the document.

Each of the div tags in the Accordion widget contains a CSS class. These classes control the style of the Accordion widget, and exist in the accompanying SpryAccordion.css file.

You can change the appearance of any given part of the Accordion widget by editing the CSS code that corresponds to the class names assigned to it in the HTML code. For example, to change the background color of the accordion’s tabs, edit the AccordionPanelTab rule in the SpryAccordion.css file. Keep in mind that changing the CSS code in the SpryAccordion.css file will affect all accordions that are linked to that file.

In addition to the classes shown in the HTML code, the Accordion widget includes certain default behaviors that are attached to the widget. These behaviors are a built‑in part of the Spry framework, and are in the SpryAccordion.js JavaScript library file. The Accordion library includes behaviors related to hovering, tab clicking (to open panels), panel focus, and keyboard navigation.

You can change the look of the accordion as it relates to these behaviors by editing the appropriate classes in the SpryAccordion.css file. If for some reason you want to remove a given behavior, you can delete the CSS rules that correspond to that behavior.

Note: While you can change the look of the accordion as it relates to a certain behavior, you cannot alter the built‑in behaviors themselves. For example, Spry still places an AccordionFocused class on an accordion in focus, even if no properties are set for the AccordionFocused class in the SpryAccordion.css file.

Variation on tags used for Accordion widget structure

In the preceding example, div tags create a nested tag structure for the widget:

Container div
	Panel div
		Tab div
		Content div

This 3-level, 4-container structure is essential for the Accordion widget to work properly; the structure, however, is more important than the actual tags you decide to use. Spry reads the structure (not div tags necessarily) and builds the widget accordingly. As long as the 3-level, 4-container structure is in place, you can use any block-level element to create the widget:

Container div 
	Panel div 
		H3 tag 
		P tag

The div tags in the example are flexible and can contain other block-level elements. A p tag (or any other inline tag), however, cannot contain other block-level elements, so you cannot use it as a container or panel tag for the accordion.