Spry

CSS code for the Collapsible Panel widget

The SpryCollapsiblePanel.css file contains the rules that style the Collapsible Panel widget. You can edit these rules to style the collapsible panel’s look and feel. The names of the rules in the CSS file correspond directly to the names of the classes specified in the Collapsible Panel widget’s HTML code.

Note: You can replace style-related class names in the SpryCollapsiblePanel.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 SpryCollapsiblePanel.js JavaScript library file. 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 SpryCollapsiblePanel.css file:

/*Collapsible Panel styling classes*/
.CollapsiblePanel {
	margin: 0px;
	padding: 0px;
	border-left: solid 1px #CCC;
	border-right: solid 1px #999;
}
.CollapsiblePanelTab {
	font: bold 0.7em sans-serif;
	background-color: #DDD;
	border-top: solid 1px #999;
	border-bottom: solid 1px #CCC;
	margin: 0px;
	padding: 2px;
	cursor: pointer;
	-moz-user-select: none;
	-khtml-user-select: none;
}
.CollapsiblePanelContent {
	margin: 0px;
	padding: 0px;
	border-bottom: solid 1px #CCC;
}
.CollapsiblePanelTab a {
	color: black;
	text-decoration: none;
}
.CollapsiblePanelOpen .CollapsiblePanelTab {
	background-color: #EEE;
}
.CollapsiblePanelTabHover,  .CollapsiblePanelOpen .CollapsiblePanelTabHover {
background-color: #CCC;
}
.CollapsiblePanelFocused .CollapsiblePanelTab {
	background-color: #3399FF;
}

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