C Sharap Example
  1. Home
  2. C-Sharp Basic
  3. SQL-Basic
  4. Linq to SQL
  5. Grid View
  6. DataList
  7. DataTable
  8. Ajax Toolkit
  9. HTML
  10. CSS
  11. Privacy & Policy
  12. About
  13. Contact
Posted by : Anwar Hossain
Category : How to use ajax toolkit in asp.net C#

How to use Ajax Collapsible panel control in asp.net c#

Dear viewers I will show how to use Ajax Collapsible panel control. By using this control div or panel can be collapsed and expanded. For this I have taken two panel one for mouse click and another for collapse and expand. First Panel contains two div one for creating head and another div contains a label for displaying text and a image control to use hide and show images. Second panel has been used as a container what type of content will be used to expand and collapse. Finally I have taken Ajax Collapsible panel control on my page and used its properties as requirement.

Ajax Collapsible panel control

I have used following properties

CollapseControlID – This property is used for which panel control will be activated as header.

ExpandControlID - This property is used for which panel control will be activated as header.

TextLabelID - This property is used for applying which label will be show hide and show text message.

TargetControlID - This property is used for which control will be expanded or collapsed.

 

CollapsedImage - This property is used for which control will be will be assigned to show  up and down arrow.

HTML

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajax" %>
<!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 id="Head" runat="server">
  <title>Collapsible Panel Example Using Ajax Toolkit</title>
  <style type="text/css">
  .ContainCss
  {
  border-radius: 13px 13px 13px 13px;
  -moz-border-radius: 13px 13px 13px 13px;
  -webkit-border-radius: 13px 13px 13px 13px;
  border: 5px solid #d9f028;
  height: 250px;
  width: 40%;
  background-color: #C1C1FF;
  padding: 4px;
  margin: 4px;
  text-align: right;
  font-size: 14px;
  font-family: Arial, Helvetica, sans-serif;
  color: White;
  }
  .Headercss
  {
  border-radius: 13px 13px 13px 13px;
  -moz-border-radius: 13px 13px 13px 13px;
  -webkit-border-radius: 13px 13px 13px 13px;
  border: 5px solid #d9f028;
  height: 20px;
  width: 40%;
  background-color: Red;
  padding: 4px;
  margin: 4px;
  text-align: right;
  font-size: 13px;
  font-family: Arial, Helvetica, sans-serif;
  color: White;
  font-weight: bold;</style>
</head>
<body>
  <form id="form1" runat="server">
  <ajax:ToolkitScriptManager ID="ScriptManager1" runat="server">
  </ajax:ToolkitScriptManager>
  <div>
  <asp:Panel ID="pnlMouseClick" runat="server" CssClass="pnlCSS">
  <div style="height: 35px; vertical-align: middle" class="Headercss">
  <div style="float: left; color: White; padding: 3px 5px 0 3px">
  Ajax Collapsible Panel Example
  </div>
  <div style="float: right; color: White; padding: 5px 5px 0 0">
  <asp:Label ID="lblMessage" runat="server" Text="" />
  <asp:Image ID="imgArrows" runat="server" />
  </div>
  </div>
  </asp:Panel>
  <asp:Panel ID="pnlCollapsable" runat="server" Height="0" CssClass="ContainCss">
  <div style="height: auto; text-align: justify;">
  Dear viewers I will show how to use Ajax Collapsible panel control. By using this
  control div or panel can be collapsed and expanded. For this I have taken two panel
  one for mouse click and another for collapse and expand. First Panel contains two
  div one for creating head and another div contains a label for displaying text and
   a image control to use hide and show images. Second panel has been used as a container
  what type of content will be used to expand and collapse.
  </div>
  </asp:Panel>
  <ajax:CollapsiblePanelExtender ID="CollapsiblePanelExtender1" runat="server" CollapseControlID="pnlMouseClick"
  Collapsed="true" ExpandControlID="pnlMouseClick" TextLabelID="lblMessage" CollapsedText="Showing.."
  ExpandedText="Hide" ImageControlID="imgArrows" CollapsedImage="expand_blue.jpg"
  ExpandedImage="collapse_blue.jpg" ExpandDirection="Vertical" TargetControlID="pnlCollapsable"
  ScrollContents="false">
  </ajax:CollapsiblePanelExtender>
  </div>
  </form>
</body>
</html>

Out Put

Ajax-Collapsible-panel-control

Realted Article Headline

How to use TextBoxWatermarkExtender in asp.net using c#
How to use Ajax AutoCompleteExtender control in asp.net using c#
How to use Ajax Collapsible panel control in asp.net c#
How to use ASP.Net AJAX Control Toolkit ModalPopupExtender Control in asp.net c#
how to add an Ajax Control Toolkit Accordion to a page
How to use html editor Ajax control toolkit example in c#
How to use Ajax ConfirmButtonExtender in asp.net using c#
how to use ajax calendar extender in asp net c#
How to use ajax toolkit FilteredTextBox Control in c#

Article Category

How to create asp.net control dynamically
Learn HTML for beginner
DataList example in C Sharp
Mail sending in asp.net c#
State Management in ASP C #
Basic sql tutorial for Beginner
DataTable example in ASP.Net C#
How to use LINQ in ASP.NET C#
asp.net c # basic tutorial
How to use ajax toolkit in asp.net C#
How to use different types of validation control using asp.net c#
How to use grid view in asp.net c#
Protected by Copyscape Online Plagiarism Detection