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 add an Ajax Control Toolkit Accordion to a page

Dear viewers I will show how to use an Ajax Control Toolkit Accordion. By using Ajax Control Toolkit Accordion content can be hidden and showed. The Accordion control allows providing multiple panes and displaying them one at a time. Each AccordionPane control has a template for its Header and its Content. Header and Content can be applied  using css for design .In this section I have used three css class to apply . Accordion has many properties to use to configure it easily.

Ajax Control Toolkit Accordion in c #

HTML

<%@ 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>Accordation Example</title>
  <style type="text/css">
  .accordion
  {
  width: 600px;
  }
 
  .accordionHeader
  {
  border: 1px solid #2F4F4F;
  color: white;
  background-color: #9370DB;
  font-family: Arial, Sans-Serif;
  font-size: 12px;
  font-weight: bold;
  padding: 5px;
  margin-top: 5px;
  cursor: pointer;
  }
 
  .accordionHeaderSelected
  {
  border: 1px solid #2F4F4F;
  color: white;
  background-color: #3CB371;
   font-family: Arial, Sans-Serif;
  font-size: 12px;
  font-weight: bold;
  padding: 5px;
  margin-top: 5px;
  cursor: pointer;
  }
 
  .accordionContent
  {
  background-color: #F0F8FF;
  border: 1px dashed #DCDCDC;
  border-top: none;
  padding: 5px;
  padding-top: 10px;
  }
  </style>
</head>
<body>
  <form id="form1" runat="server">
  <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
  </asp:ToolkitScriptManager>
  <div>
  <asp:Accordion ID="Accordion1" runat="server" CssClass="accordion" HeaderCssClass="accordionHeader"
  HeaderSelectedCssClass="accordionHeaderSelected" ContentCssClass="accordionContent"
  SelectedIndex="0">
  <Panes>
  <asp:AccordionPane ID="AccordionPane1" runat="server">
  <Header>
  First Sample Accordation
  </Header>
  <Content>
  <asp:Label ID="lblFirst" runat="server" Text=""></asp:Label>
  </Content>
  </asp:AccordionPane>
  <asp:AccordionPane ID="AccordionPane2" runat="server">
  <Header>
  Second Sample Accordation
  </Header>
  <Content>
  <asp:Label ID="lblSecond" runat="server" Text=""></asp:Label>
  </Content>
  </asp:AccordionPane>
  <asp:AccordionPane ID="AccordionPane3" runat="server">
  <Header>
  Third Sample Accordation
  </Header>
  <Content>
  <asp:Label ID="lblThird" runat="server" Text=""></asp:Label>
  </Content>
  </asp:AccordionPane>
  </Panes>
  </asp:Accordion>
  </div>
  </form>
</body>
</html>

I have used following properties

SelectedIndex – : This property is used for initial display  AccordionPane 0 for first 1 for second and 2 for third and..

HeaderCssClass –  : This property is used for applying display all  AccordionPane Header Style.

HeaderSelectedCssClass- : This property is used for applying display selected   AccordionPane Header Style.

ContentCssClass - :This property is used for applying display AccordionPane Content Style.

CODE BEHIND

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
 
public partial class TestDesign_AjaxToolkitAccordation : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
   if (!IsPostBack)
  {
 
  LoadData();
 
  }
}
private void LoadData()
{
  lblFirst.Text = "Dear viewers I will show how to use an Ajax Control Toolkit Accordion.";
  lblSecond.Text = "Dear viewers I will show how to use an Ajax Control Toolkit Accordion.";
  lblThird.Text = "Dear viewers I will show how to use an Ajax Control Toolkit Accordion.";
 
 
}
}
 

Out Put

ajaxtoolkit-accordation

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