Ajax CollapsiblePanelExtender Control in VB.NET

In this article we can easily add collapsible section in webpage.
  • 3966

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.
ASP-page1.gif

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.
webforms.gif

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.
out1.gif 

Step : 4 When we click in hi option then hide detail image show name my flower
.

out2.gif

Categories

More Articles

© 2020 DotNetHeaven. All rights reserved.