ASP.NET AJAX Accordion Control
In this example, i am explaining how to use AJAX Accordion control using ASP.NET.For doing this we have to follow below steps.
1. Register Ajaxcontroltoolkit to the page.
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajax" %>
2. Add the accordion control script.
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>
<asp:Accordion
ID="Accordion1"
runat="server">
</asp:Accordion>
3. Need to add the <asp:AccordionPane > under <panes> tag. and give the panes header and content data. Please go through below code.
4. Add the CSS Classes and write the CSS styles to the Accordion and panes. Please refer below code.
Output:
ASP.NET Code:
2. Add the accordion control script.
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>
<asp:Accordion
ID="Accordion1"
runat="server">
</asp:Accordion>
3. Need to add the <asp:AccordionPane > under <panes> tag. and give the panes header and content data. Please go through below code.
4. Add the CSS Classes and write the CSS styles to the Accordion and panes. Please refer below code.
<ajax:Accordion ID="Accordion1" runat="server" CssClass="AccordionMain" HeaderCssClass="AccordionHeader"
HeaderSelectedCssClass="AccordionHeadSelected" ContentCssClass="AccordionContent">
Output:
 |
| ASP.NET AJAX Accordion Control Example |
ASP.NET Code:
<%@ Page Language="C#" %>
<%@ 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">
<script runat="server">
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.AccordionMain
{
width: 500px;
height:500px;
}
.AccordionHeader
{
border: 1.5px solid #2F4F4F;
color: white;
background-color: #2E4E7B;
font-family: Sans-Serif;
font-size: 11px;
font-weight: bold;
padding: 4px;
margin-top: 6px;
cursor: pointer;
}
.AccordionHeadSelected
{
border: 1px solid #2F4F4F;
color: white;
background-color: #5078B3;
font-family: Arial, Sans-Serif;
font-size: 12px;
font-weight: bold;
padding: 5px;
margin-top: 5px;
cursor: pointer;
}
.AccordionContent
{
background-color: #D3DEEF;
border: 1px dashed #2F4F4F;
border-top: none;
padding: 5px;
padding-top: 10px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<ajax:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</ajax:ToolkitScriptManager>
<ajax:Accordion ID="Accordion1" runat="server" CssClass="AccordionMain" HeaderCssClass="AccordionHeader"
HeaderSelectedCssClass="AccordionHeadSelected" ContentCssClass="AccordionContent">
<Panes>
<ajax:AccordionPane runat="server">
<Header>
Profile</Header>
<Content>
<b>Name:</b> Ranga Rajesh Kumar. <br />
<b>Blog:</b> http://aspnettutorialonline.blogspot.com <br />
<b>Programming Languages AND TECHNOLOGIES:</b><br />
ASP.NET<br />
C#.NET<br />
SQL SERVER<br />
JQUERY<br />
JAVASCRIPT<br />
CSS<br />
HTML<br />
and more.<br />
</Content>
</ajax:AccordionPane>
<ajax:AccordionPane ID="AccordionPane1" runat="server">
<Header>
Window 2</Header>
<Content>
This is window two</Content>
</ajax:AccordionPane>
<ajax:AccordionPane ID="AccordionPane2" runat="server">
<Header>
Window 3</Header>
<Content>
This is window three</Content>
</ajax:AccordionPane>
</Panes>
</ajax:Accordion>
</div>
</form>
</body>
</html>
Post a Comment
Please give your valuable feedback on this post. You can submit any ASP.NET article here. We will post that article in this website by your name.