Step 1: - Right Click on Project Root folder => Click on Manage NuGet Packages… => Search Ajax in search box and Select AjaxControlToolkit from list =>
Click on Install button
Step
2: - Add AjaxAccordian.aspx Web Form
page in project
Step 3: - AjaxAccordian.aspx design Page
Code
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AjaxAccordion.aspx.cs" Inherits="AjaxControls.AjaxAccordion" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.accordion {
width: 100%;
}
.accordionHeader {
border: 1px solid #2F4F4F;
color: white;
background-color: #507CD1;
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: #507CD1;
font-family: Arial,
Sans-Serif;
font-size: 12px;
font-weight: bold;
padding: 5px;
margin-top: 5px;
cursor: pointer;
}
.accordionContent {
background-color: #EFF3FB;
border: 1px dashed #2F4F4F;
border-top: none;
padding: 5px;
padding-top: 10px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager runat="server">
</asp:ScriptManager>
<asp:Accordion ID="Accordion1" runat="server" CssClass="accordion" HeaderCssClass="accordionHeader"
HeaderSelectedCssClass="accordionHeaderSelected" ContentCssClass="accordionContent">
<Panes>
<asp:AccordionPane ID="AccordionPane1" runat="server">
<Header>
Pane 1
</Header>
<Content>
Pane 1 Content Here
</Content>
</asp:AccordionPane>
<asp:AccordionPane ID="AccordionPane2" runat="server">
<Header>
Pane 2
</Header>
<Content>
Pane 2 Content Here
</Content>
</asp:AccordionPane>
<asp:AccordionPane ID="AccordionPane3" runat="server">
<Header>
Pane 3
</Header>
<Content>
Pane 3
Content Here
</Content>
</asp:AccordionPane>
</Panes>
</asp:Accordion>
</div>
</form>
</body>
</html>
Step 4: - Output
No comments:
Post a Comment