ARTICLE
CollapsiblePanelExtender Control in Ajax
In this article we can easily add collapsible section in webpage.
Working with CollapsiblePanelExtender Control
in Ajax.
Introduction : The
CollapsiblePanelExtender Control is a flexible extender control which help
we can be easily add Collapsible sections in a Web page. This extender control
target any ASP.NET Panel control.The page developer define which control on page
should be open or close control for the Panel or the Panel set automatic
expand or colapse when mouse cursor move in or out of.
The Panel is also post-back aware on a client post back, it automatically remembers and restores client state.
Properties of the CollapsiblePanelExtender
Control.
- AutoCollapse.
- AutoExpand.
- Collapsed.
- CollapsedControl ID.
- CollapsedImage.
- CollapsedSize.
- CollapsedText.
- ExpanedControl ID.
- Expaned Iamge.
Step : 1 Open visual studio and go to
file menu.
- Select WebSite option.
- Select ASP.NET WebSite.
- Default.aspx page open.
Step : 2 Go to SolutionExplorer and
right click. - Select add new items.
- Select WebForms option and add.
- Drag and drop control from toolbox.
- Write code.
Code :
<title>
collapse panel</title>
<style type="text/css">
.ColapsPanelHeader
{}
.colapspanel1
{}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div>
<asp:Panel ID="Panel2" runat="server"
BackColor = "Aqua" CssClass = "ColapsPanelHeader"
Height
="30px">
<div style="padding:5px;
cursor : pointer;
vertical-align:
middle;" >
<div style="float
: left;" > Show Picture?
</div>
<div style="float
:left; margin-left:
20px;">
<asp:Label ID="Label1" runat="server" Text="Label">(by)</asp:Label>
</div>
<div style="float:
right; vertical-align:
middle;">
</div>
</div>
</asp:Panel>
<asp:Panel ID="Panel1" runat="server" CssClass = "colapspanel1" Height ="136px">
<br />
<asp:ImageButton ID="ImageButton2" runat="server" ImageUrl ="~/birdofparadiseWBtn.jpg"
AlternateText ="ASP.NET
AJAX" ImageAlign
="Left"/> </asp:Panel>
</div>
<asp:CollapsiblePanelExtender ID="CollapsiblePanelExtender1" runat="server" TargetControlID = "panel1"
CollapseControlID ="panel2" ExpandControlID
="panel2" ExpandedImage ="~/birdofparadiseWBtn.jpg" Collapsed = "true" TextLabelID = "Label1" ExpandedText = "my flower"
CollapsedText ="hi" ImageControlID = "Image1" CollapsedImage = "~/birdofparadiseWBtn.jpg"
SuppressPostBack
="true"> </asp:CollapsiblePanelExtender>
</form>
</body>
</html>
Step : 3 Now press F5 and run
the program.
Step : 4 When we click in hi option then
hide detail image show name my flower
.
