<%@ Page Language="C#" AutoEventWireup="true" CodeFile="collapsiblepanel.aspx.cs" Inherits="collapsiblepanel" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<!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 runat="server">
<title>Collapsible Panel Example</title>
<style type="text/css">
.pnlCSS{
font-weight: bold;
cursor: pointer;
border: solid 1px #c0c0c0;
width:30%;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div>
<asp:Panel ID="pnlClick" runat="server" CssClass="pnlCSS">
<div style="background-image:url('bck4.jpg'); height:30px; vertical-align:middle">
<div style="float:left; color:White;padding:5px 5px 0 0">
Collapsible Panel
</div>
<div style="float:right; color:White; padding:5px 5px 0 0">
<asp:Label ID="lblMessage" runat="server" Text="Label"/>
<asp:Image ID="imgArrows" runat="server" />
</div>
<div style="clear:both"></div>
</div>
</asp:Panel>
<asp:Panel ID="pnlCollapsable" runat="server" Height="0" CssClass="pnlCSS">
HI I WOULD LIKE TO EXPLAIN ABOUT COLLAPSIBLE PANEL EXTENDER. IN SOME WEB SITES IF YOU CLICK DOWN ARROW MEANS IT WILL SHOW THE DATA AND IF YOU CLICK UP ARROW MEANS IT WILL HIDE THE DATA
THAT MEANS COLLAPSE AND EXTENDABLE THIS WILL DONE BY USING COLLAPSIBLE PANNEL EXTENDER.
</asp:Panel>
<asp:collapsiblepanelextender
ID="CollapsiblePanelExtender1"
runat="server"
CollapseControlID="pnlClick"
Collapsed="true"
ExpandControlID="pnlClick"
TextLabelID="lblMessage"
CollapsedText="Show"
ExpandedText="Hide"
ImageControlID="imgArrows"
CollapsedImage="downarrow.jpg"
ExpandedImage="uparrow.jpg"
ExpandDirection="Vertical"
TargetControlID="pnlCollapsable"
ScrollContents="false"></asp:collapsiblepanelextender>
</div>
</form>
</body>
</html>