How to use ajax Accordion control in Asp.Net

Accordion control is used to bind multiple panes and display one pane at a time. This control is like having multiple collapsiblepanels where only one can be opened at a time. To use Accordion control in our code we need to design code in certain format like below

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Accordion.aspx.cs" Inherits="Accordion" %>

<%@ 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></title>
    <style type="text/css">
    .accordionHeader
    {
        border: 1px solid #2F4F4F;  
            color: white;  
            background-color: #442222;  
            font-family: Arial, Sans-Serif;  
            font-size: 12px;  
            font-weight: bold;  
            padding: 5px;  
            margin-top: 5px;  
            cursor: pointer;  
        }  
        
         .accordionContent {  
            background-color: #FFFFff;  
            border: 1px solid #2F4F4F;  
            border-top: none;  
            padding: 5px;  
            padding-top: 10px;  
        }  
        
        .accordionHeaderSelected {  
            border: 1px solid #2F4F4F;  
            color: white;  
            background-color: gray;  
            font-family: Arial, Sans-Serif;  
            font-size: 12px;  
            font-weight: bold;  
            padding: 5px;  
            margin-top: 5px;  
            cursor: pointer;  
                }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <center>
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <asp:Accordion ID="Accordion1" runat="server"  HeaderCssClass="accordionHeader" ContentCssClass="accordionContent" HeaderSelectedCssClass="accordionHeaderSelected" Width="80%">
            <Panes>
                <asp:AccordionPane ID="AccordionPane1" runat="server">
                <Header>Customer</Header>
                <Content><u><b>Customer list goes here..!!</b></u><br />
                >> Aayush Singh<br />
                >> Ranveer Kumar<br />
                </Content>
                </asp:AccordionPane>
                <asp:AccordionPane ID="AccordionPane2" runat="server">
                <Header>Vendor</Header>
                <Content><u><b>Vendor list goes here..!!</b></u><br />
                >> Pranesh Juwale<br />
                >> Suhash k<br />
                >> Ranjeet S<br />
                </Content>
                </asp:AccordionPane>
                <asp:AccordionPane ID="AccordionPane3" runat="server">
                <Header>Sales Person</Header>
                <Content><u><b>Sales Person list goes here..!!</b></u><br />
                >> Sanjay Rana<br />
                >> Rajeev Saxena<br /></Content>
                </asp:AccordionPane>
            </Panes>
            </asp:Accordion>
        </ContentTemplate>
        </asp:UpdatePanel>
    </div>
    </center>
    </form>
</body>

</html>



Comments

Popular posts from this blog

How to show enlarge image when mouse hover on image or link in Asp.Net(c#) using JavaScript

StateCode and StatusCode Values for mostly used entities in Microsoft Dynamics CRM 2013

How to add custom filter lookup field based on OptionSet field selection in Dynamics CRM.

go to top image