<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-7" />
<title>Untitled Document</title>
<style>
/*CollapsiblePanel*/
.ContainerPanel
{
width:400px;
border:1px;
border-color:#1052a0;
border-style:double double double double;
}
.collapsePanelHeader
{
width:400px;
height:25px;
background-image: url(http://www.asp.net/AJAX/AjaxControlToolkit/Samples/images/bg-menu-main.png);
background-repeat:repeat-x;
color:#FFF;
font-weight:bold;
}
.HeaderContent
{
float:left;
padding-left:5px;
font-family:Arial, Helvetica, sans-serif;
font-size: small;
}
.Content
{
}
.ArrowExpand
{
background-image: url(http://www.asp.net/AJAX/AjaxControlToolkit/Samples/images/expand_blue.jpg);
width:13px;
height:13px;
float:right;
margin-top:7px;
margin-right:5px;
margin-bottom: 5px;
}
.ArrowExpand:hover
{
cursor:hand;
}
.ArrowClose
{
background-image: url(http://www.asp.net/AJAX/AjaxControlToolkit/Samples/images/collapse_blue.jpg);
width:13px;
height:13px;
float:right;
margin-top:7px;
margin-right:5px;
margin-bottom: 5px;
}
.ArrowClose:hover
{
cursor:hand;
}
</style>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script language="javascript">
$(document).ready(function() {
$("DIV.ContainerPanel > DIV.collapsePanelHeader ").toggle(
function() {
$(this).html( $(this).html().replace("(Show","(Hide") )
$(this).next("div.Content").show("slow");
$("DIV.ArrowExpand",this).attr("class", "ArrowClose");
},
function() {
$(this).html( $(this).html().replace("(Hide","(Show") )
$(this).next("div.Content").hide("slow");
$("DIV.ArrowClose",this).attr("class", "ArrowExpand");
});
});
</script>
</head>
<body>
<div id="ContainerPanel" class="ContainerPanel">
<div id="header" class="collapsePanelHeader">
<div id="dvHeaderText" class="HeaderContent">jQuery Collapsible Panel1 (Show Details...)</div>
<div id="dvArrow" class="ArrowExpand"></div>
</div>
<div id="dvContent" class="Content" style="display:none">
/*Content*/
</div>
</div>
</body>
</html>