ASP.NET AJAX Accordion Control Example

  Uncategorized

 ASP.NET AJAX Accordion Control Example

<%@ 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>
        <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
   

        <ajax:Accordion ID="Accordion1" runat="server" CssClass="AccordionMain" HeaderCssClass="AccordionHeader"
            HeaderSelectedCssClass="AccordionHeadSelected" ContentCssClass="AccordionContent">
            <Panes>
                <ajax:AccordionPane runat="server">
                    <Header>
                        Window 1</Header>
                    <Content>
                   This is window one
                        </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>

5,344 thoughts on - ASP.NET AJAX Accordion Control Example