Spry

CSS code for the Accordion widget

The SpryAccordion.css file contains the rules that style the Accordion widget. You can edit these rules to style the accordion’s look and feel. The names of the rules in the CSS file correspond directly to the names of the classes specified in the Accordion widget’s HTML code.

Note: You can replace style-related class names in the SpryAccordion.css file and HTML code with class names of your own. Doing so does not affect the functionality of the widget, as CSS code is not required for widget functionality.

The default functionality for the behaviors classes at the end of the style sheet are defined in the JavaScript library file SpryAccordion.js. You can change the default functionality by adding properties and values to the behavior rules in the style sheet.

The following is the CSS code for the SpryAccordion.css file:

/*Accordion styling classes*/
.Accordion {
	border-left: solid 1px gray;
	border-right: solid 1px black;
	border-bottom: solid 1px gray;
	overflow: hidden;
}
.AccordionPanel {
	margin: 0px;
	padding: 0px;
}
.AccordionPanelTab {
	background-color: #CCCCCC;
	border-top: solid 1px black;
	border-bottom: solid 1px gray;
	margin: 0px;
	padding: 2px;
	cursor: pointer;
}
.AccordionPanelContent {
	overflow: auto;
	margin: 0px;
	padding: 0px;
	height: 200px;
}
.AccordionPanelOpen .AccordionPanelTab {
	background-color: #EEEEEE;
}
.AccordionPanelClosed .AccordionPanelTab {
}
/*Accordion behaviors  classes*/
.AccordionPanelTabHover {
	color: #555555;
}
.AccordionPanelOpen .AccordionPanelTabHover {
	color: #555555;
}
.AccordionFocused .AccordionPanelTab {
	background-color: #3399FF;
}
.AccordionFocused .AccordionPanelOpen .AccordionPanelTab {
	background-color: #33CCFF;
}

The SpryAccordion.css file contains extensive comments, explaining the code and the purpose for certain rules. For further information, see the comments in the file.