Working with Ajax collapsible panel
Introduction
ASP.NET AJAX Toolkit gives developer some powerful controls for developing complex business requirements faster, better and with efficient network usage (asynchronous).
In this article we will see the collapsible panel of Ajax toolkit which solves the most common feature of any business web application. Collapsible panel give user the flexibility to hide or unhide some or full portion (details) of your webpage. This functionality is usually used in FAQ (Frequently asked questions) page where you list out all your questions on a webpage. User can then click on the appropriate question to view the answer related to that question
Normally an arrow panel is added in front of the question to let the user know that this question should be expanded or collapsed to unhide or hide the related answer. Advantage of this control is that it does not trigger the post back onto the server nor does it refresh any portion of your webpage. Achieving this functionality with plain JavaScript or dot net would become hectic and time consuming. Moreover, you custom coding will not give you many other features which this Ajax control offers.
Properties of Ajax collapsible panel
TargetControlID - ID of the panel to be shown when the control is expanded.
ExpandControlID/CollapseControlID - ID of the control which should be clicked to expand or collapse the related content. Usually, both these properties are set to the same control id which means the same control should be clicked to toggle the state of the target control.
- AutoCollapse/AutoExpand - Setting these properties will allow the user to hide or unhide the content on mouse hover over the target control instead of clicking it.
TextLabelID - ID of the control which will be used to show the status message to the user. CollapsedText/ExpandedText - Set the status message for the control specified in TextLabelID on collapse and expand ScrollContents - Set it to true if the content is large and the space where you are using this control is less so that the scroll bar is shown to scroll through the contents. ImageControlID -ID of Image control which you shall use to depict the expanded or collapsed status to the user. Usually, this property is used along with CollapsedImage and ExpandedImage properties where you set the image path for collapsed and expanded situation. ExpandedText or CollapsedText, if set, becomes the alternate text of this image. CollapsedImage/ ExpandedImage - Image url for the collapsed and expanded image ExpandDirection - Set it to “Vertical” or “Horizontal” to decide how you wanna expand your panel (top-to-bottom or left-to-right). TargetHeight/ TargetWidth - Get or set the height of he panel in pixels. CollapsedSize / ExpandedSize -Get or set the size of target control in colpased or expanded condition SuppressPostBack - specify whether you want to suppress postbacks in case the controls assigned in CollapseControlID or ExpandControlID are clicked.
Demo of Ajax collapsible panel
For this demo, I have declared four panels to be used with two Collapsible Panel extender control. Four panel forms two pairs of question and answer.
<asp:Panel ID="PnlTitle" runat="server">
<asp:Image ID="Image1" runat="server" ImageUrl="images/expand_blue.jpg"></asp:Image>
<span style="background-color: Gray; width: 300px">Who am I?
<asp:Label ID="Label1" runat="server" Text="Show Details(...)"></asp:Label></span>
</asp:Panel>
<asp:Panel ID="PnlContent" runat="server">
<b>I am sarin</b><br />
I live in Mumbai, India<br />
You can Contact me at <a href="https://mallstuffs.com">https://mallstuffs.com</a>
</asp:Panel>
<asp:Panel ID="pnlWork" runat="server">
<asp:Image ID="Image2" runat="server" ImageUrl="images/expand_blue.jpg"></asp:Image>
<span style="background-color: Gray; width: 300px">what I do?
<asp:Label ID="Label2" runat="server" Text="Show Details(...)"></asp:Label></span>
</asp:Panel>
<asp:Panel ID="pnlWorkDetails" runat="server">
<b>I have been developing application in microsoft .Net Technology for the last 5 years.</b><br />
I like to write on mythical and spiritual stuffs.
</asp:Panel>
Code for two collapsible panel which uses above four panels is shown below. As you see below, I have assigned first two panels as header and body of first Collapsible Panel and next two panels as header and body of second Collapsible Panel. I have set the URL path of ExpandedImage and CollapsedImage properties. Additionally, CollapsedText and ExpandedText properties are also set to display the alternate text tote user on image hover.
<ajaxToolkit:CollapsiblePanelExtender ID