Ajax accordion control for asp.net

Question

0.00/5 (No votes)

See more:

Hi i wish to use accordion control in my page. this is my full code.

When i click the pane nothing happen. The panes are not showing the content. the top content alone visible other panes are not responding to the click.

ASP.NET

<%@ Page Title="" Language="C#" AutoEventWireup="true" CodeBehind="Sample.aspx.cs" Inherits="Audit.Sample" %>
<%@ 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">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1">
    <title></title>
    <style type="text/css">
        .accordionContent {
            background-color: #D3DEEF;
            border-color: -moz-use-text-color #2F4F4F #2F4F4F;
            border-right: 1px dashed #2F4F4F;
            border-style: none dashed dashed;
            border-width: medium 1px 1px;
            padding: 10px 5px 5px;
            width: 20%;
        }

        .accordionHeaderSelected {
            background-color: #5078B3;
            border: 1px solid #2F4F4F;
            color: white;
            cursor: pointer;
            font-family: Arial,Sans-Serif;
            font-size: 12px;
            font-weight: bold;
            margin-top: 5px;
            padding: 5px;
            width: 20%;
        }

        .accordionHeader {
            background-color: #2E4D7B;
            border: 1px solid #2F4F4F;
            color: white;
            cursor: pointer;
            font-family: Arial,Sans-Serif;
            font-size: 12px;
            font-weight: bold;
            margin-top: 5px;
            padding: 5px;
            width: 20%;
        }

        .href {
            color: White;
            font-weight: bold;
            text-decoration: none;
        }
    </style>
</head>
<body>
    <form name="form1" id="form1" runat="server">
        <ajax:ToolkitScriptManager ID="Scriptmanager1"  runat="server" />
        <div>
            <ajax:Accordion ID="UserAccordion"  runat="server" SelectedIndex="0" HeaderCssClass="accordionHeader"
                HeaderSelectedCssClass="accordionHeaderSelected" ContentCssClass="accordionContent" FadeTransitions="true" SuppressHeaderPostbacks="true" TransitionDuration="250" FramesPerSecond="40" RequireOpenedPane="false" AutoSize="None">
                <Panes>
                    <ajax:AccordionPane ID="AccordionPane1"  runat="server">
                        <Header><a href="#" class="href">One</a></Header>
                        <Content>
                            <asp:Panel ID="UserReg" runat="server">
                                Accordion content 1
                            </asp:Panel>
                        </Content>
                    </ajax:AccordionPane>
                    <ajax:AccordionPane ID="AccordionPane2"  runat="server">
                        <Header><a href="#" class="href">Two</a></Header>
                        <Content>
                            <asp:Panel ID="Panel1" runat="server">
                                Accordion content 2
                            </asp:Panel>
                        </Content>
                    </ajax:AccordionPane>
                    <ajax:AccordionPane ID="AccordionPane3"  runat="server">
                        <Header><a href="#" class="href">Three</a> </Header>
                        <Content>
                            <asp:Panel ID="Panel2" runat="server">
                                Accordion content 3
                            </asp:Panel>
                        </Content>
                    </ajax:AccordionPane>
                </Panes>
            </ajax:Accordion>
        </div>
    </form>
</body>
</html>

any idea..?

Posted 17-Oct-13 19:34pm

R. Ramprakash

Add a Solution

Comments

Harshil_Raval 18-Oct-13 1:42am

hi, i just copy paste your html on my side, it's working fine. Which ajaxtoolkit version you are using?

R. Ramprakash 18-Oct-13 1:44am

Ajax version 4.17

Harshil_Raval 18-Oct-13 1:48am

My toolkit version is older than you, still it's working.. in which browser you are checking?

R. Ramprakash 18-Oct-13 1:51am

firefox n chrome both i checked..i don kno wats the issue

Harshil_Raval 18-Oct-13 1:57am

have you add any addon like firebug in firefox? then check in error console, there must be some error. Also check for your reference of dll, that it is working fine. Also, to check just add any other ajax control like watermarkextender. If it works fine or not..

R. Ramprakash 18-Oct-13 2:35am

now its working thankyou frnd..problem is in the referencing the ajax dll

Harshil_Raval 18-Oct-13 3:11am

glad to help you..

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)