This is the demo for creating accordian in asp.net. Here i will explain you complete steps for implementing accordian panel in asp.net. First of all we need ajaxtoolkit to implement this demo.
Step1:
Download ajaxtoolkit and add it in your bin folder.
Step2:
Now you have to add reference of your ajaxtoolkit in your webpage like default.aspx. and you need scriptmanager in your page.
Here i am giving you complete implemented code of your implemented default.aspx. file so you don't need to do anything.
Default.aspx
you don't need to write anything in this backend class file.
output :
1] when you run your project itwill look like this.
2] when you tapped second panel than it will look like this.
I hope you are clear with this this accordian topic in asp.net. If you like this than please like it or just leave comment for our improvements. You are free to leave comment for any help
Step1:
Download ajaxtoolkit and add it in your bin folder.
Step2:
Now you have to add reference of your ajaxtoolkit in your webpage like default.aspx. and you need scriptmanager in your page.
Here i am giving you complete implemented code of your implemented default.aspx. file so you don't need to do anything.
Default.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>Default.aspx.cs file:
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<!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>Untitled Page</title>
<link href="Content.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<cc1:Accordion ID="Accordion1" runat="server" AutoCollapse="True" AutoExpand="True"
ScrollContents="True" HeaderCssClass="Header" ContentCssClass="Contents" HeaderSelectedCssClass="SelectedHeader"
Font-Names="Verdana" Font-Size="10" BorderColor="#000000" BorderStyle="Solid"
BorderWidth="1" FramesPerSecond="100" FadeTransitions="true" TransitionDuration="500">
<Panes>
<cc1:AccordionPane runat="server" ID="AccordionPane1">
<Header>
Tapped this first one</Header>
<Content>
<table>
<tr>
<td style="background-color: Silver">
First
</td>
</tr>
<tr>
<td>
Hi this is the first Accordian Panel
</td>
</tr>
</table>
</Content>
</cc1:AccordionPane>
<cc1:AccordionPane runat="server" ID="AccordionPane2">
<Header>
Tapped this second one</Header>
<Content>
<table>
<tr>
<td style="background-color: Aqua">
<b>Second</b>
</td>
</tr>
<tr>
<td>
hi this is the second Panel
</td>
</tr>
</table>
</Content>
</cc1:AccordionPane>
<cc1:AccordionPane runat="server" ID="AccordionPane3">
<Header>
Tapped this third one</Header>
<Content>
<table>
<tr>
<td style="background-color: Aqua">
<b>Third</b>
</td>
</tr>
<tr>
<td style="background-color: Aqua">
This is the third Panel
</td>
</tr>
</table>
</Content>
</cc1:AccordionPane>
</Panes>
</cc1:Accordion>
</form>
</body>
</html>
you don't need to write anything in this backend class file.
output :
1] when you run your project itwill look like this.
2] when you tapped second panel than it will look like this.
0 comments:
Post a Comment