6 Tips for Working with the ASP.NET AJAX Accordion Control

Posted by: Suprotim Agarwal , on 10/15/2008, in Category ASP.NET AJAX
Views: 153650
Abstract: Here are 6 tips that could help you out in your projects while dealing with ASP.NET AJAX Accordion Control.
6 Tips for Working with the ASP.NET AJAX Accordion Control
 
As given in the ASP.NET AJAX Toolkit documentation “The Accordion is a web control that allows you to provide multiple panes and display them one at a time. It is like having several CollapsiblePanels where only one can be expanded at a time.” Here are some tips that could help you out in your projects while dealing with Accordion Control.
Before we start, the Accordion control on which we are applying these tips looks similar to the following:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
 
<%@ 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>Accordion Tips and Tricks</title>
    <style type="text/css">
        .accordionHeader
        {
            color: white;
            background-color: #719DDB;
            font: bold 11px auto "Trebuchet MS", Verdana;
            font-size: 12px;
            cursor: pointer;
            padding: 4px;
            margin-top: 3px;
        }
        .accordionContent
        {
            background-color: #DCE4F9;
            font: normal 10px auto Verdana, Arial;
            border: 1px gray;               
            padding: 4px;
            padding-top: 7px;
        }
</style>
   
<script type="text/javascript">
    // Add the scripts shown in the tips over here
</script>
</head>
<body>
    <form id="form1" runat="server">
    <div>   
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
        <cc1:Accordion ID="AccordionCtrl" runat="server"
        SelectedIndex="0" HeaderCssClass="accordionHeader"
        ContentCssClass="accordionContent" AutoSize="None"
        FadeTransitions="true">
            <Panes>
                <cc1:AccordionPane ID="AccordionPane0" runat="server">
                    <Header>Pane 1</Header>
                    <Content>
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                        sed do eiusmod tempor incididunt ut labore et dolore magna
                        aliqua.
                    </Content>
                </cc1:AccordionPane>
                <cc1:AccordionPane ID="AccordionPane1" runat="server">
                    <Header>Pane 2</Header>
                    <Content>
                        Ut enim ad minim veniam, quis nostrud exercitation ullamco
                        laboris nisi ut aliquip ex ea commodo consequat.
                    </Content>
                </cc1:AccordionPane>
                <cc1:AccordionPane ID="AccordionPane2" runat="server">
                    <Header>Pane 3</Header>
                    <Content>
                        Duis aute irure dolor in reprehenderit in voluptate velit
                        esse cillum dolore eu fugiat nulla pariatur.
                    </Content>              
                </cc1:AccordionPane>
                <cc1:AccordionPane ID="AccordionPane3" runat="server">
                    <Header>Pane 4</Header>
                    <Content>
                        Excepteur sint occaecat cupidatat non proident, sunt in
                        culpa qui officia deserunt mollit anim id est laborum.
                    </Content>
                </cc1:AccordionPane>
            </Panes>
        </cc1:Accordion>       
    </div>
    </form>
</body>
</html>
Tip 1: How to Add an ASP.NET AJAX Accordion Pane at Runtime
We can add a new Accordion Pane programmatically using both JavaScript as well as code-behind (C# or VB.NET)
Using Javascript
    <script type="text/javascript">
        function pageLoad()
        {
            AddPaneAtRuntime();
        }
       
        function AddPaneAtRuntime()
        {
            var newAccordion = $find("AccordionCtrl_AccordionExtender");
            var header = document.createElement("div");
            header.innerText = "Pane 5";
            header.className = "accordionHeader"; //set header css                       
            var content = document.createElement("div");
            content.innerText = " This pane was added using JavaScript";
            content.className = "accordionContent"; // set content css
            newAccordion.get_element().appendChild(header);
            newAccordion.get_element().appendChild(content);
            newAccordion.addPane(header,content);       
        }
 
    </script>
Using Codebehind
C#
protected void Page_Load(object sender, EventArgs e)
{
    AccordionPane newAccordion = new AccordionPane();
    newAccordion.HeaderContainer.Controls.Add(new LiteralControl("Pane 5"));
    newAccordion.ContentContainer.Controls.Add(new
              LiteralControl("This pane was added using Code Behind"));
    AccordionCtrl.Panes.Add(newAccordion);
}
VB.NET
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
      Dim newAccordion As New AccordionPane()
      newAccordion.HeaderContainer.Controls.Add(New LiteralControl("Pane 5"))
      newAccordion.ContentContainer.Controls.Add(New LiteralControl("This pane was added using Code Behind"))
      AccordionCtrl.Panes.Add(newAccordion)
End Sub
 
Tip 2: How to Hide an ASP.NET AJAX Accordion Pane at Runtime
In order to hide an Accordion Pane, use the following script:
    <script type="text/javascript">
        function pageLoad()
        {
            hideAccordionPane(1);
        }
 
        // hides pane 1
        function hideAccordionPane(paneno)
        {
            $find('AccordionCtrl_AccordionExtender').get_Pane(paneno).header.style.display="none";
            $find('AccordionCtrl_AccordionExtender').get_Pane(paneno).content.style.display="none";
        }
    </script>
 
Tip 3: How to programmatically expand an ASP.NET AJAX Accordion Pane
In order to programmatically expand a given Accordion Pane, use the set_SelectedIndex on the Accordion control. The sample shown below expands Pane 3 programmatically
    <script type="text/javascript">
        function pageLoad()
        {
            changeSelected(2); // expand pane 3
        }
       
        // expand given accordion pane
        function changeSelected(idx)
        {
            $find('AccordionCtrl_AccordionExtender').set_SelectedIndex(idx);
        }
    </script>
Tip 4: How to determine when an ASP.NET AJAX Accordion Pane has been expanded/selected
In order to determine when the user selects a different pane, you would need to add the add_selectedIndexChanged event to the Accordion and then determine the selected pane using get_SelectedIndex()
    <script type="text/javascript">
        function pageLoad()
        {
var accCtrl = $find('AccordionCtrl_AccordionExtender');
            accCtrl.add_selectedIndexChanged(onAccordionPaneChanged);  
        }
 
               
        function onAccordionPaneChanged(sender, eventArgs)
        {
            var selPane = sender.get_SelectedIndex() + 1;
            alert('You selected Pane ' + selPane);
        }
    </script>
I got this tip from the asp.net forums and was written by JonathanShen
 
Tip 5: Expand an ASP.NET AJAX Accordion Pane on MouseOver
By default, the Accordion Pane expands on the Click event. If you want to override this functionality and expand it on mouseover, use this script
    <script type="text/javascript">
        function pageLoad()
        {
            AddMouseOverToAccordion();
        }
       
       
        function AddMouseOverToAccordion()
        {
            var acc = $find('AccordionCtrl_AccordionExtender');
            for(paneIdx = 0; paneIdx < acc.get_Count(); paneIdx++)
            {          
                $addHandler(acc.get_Pane(paneIdx).header,"mouseover",acc._headerClickHandler);
            } 
        }
 
               
    </script>
 
Tip 6: Prevent an ASP.NET AJAX Accordion Pane from Expanding
This tip is helpful if you want to restrict the view of an Accordion Pane. Use the following script to prevent users from expanding Pane 3
    <script type="text/javascript">
        function pageLoad()
        {
            RemoveHandlerAtRuntime(2);          
        }
       
       
        function RemoveHandlerAtRuntime(pane)
        {
             $removeHandler($find('AccordionCtrl_AccordionExtender').get_Pane(pane).header,"click",$find('AccordionCtrl_AccordionExtender')._headerClickHandler);
        }
       
    </script>
I hope those tips were helpful. If you have got one that has not been covered here, then write back and share your tips with the other readers. I hope this article was useful and I thank you for viewing it
The source code for this article can be downloaded over here.
Give a +1 to this article if you think it was well written. Thanks!
Recommended Articles
Suprotim Agarwal, ASP.NET Architecture MVP, MCSD, MCAD, MCDBA, MCSE, is the CEO of A2Z Knowledge Visuals Pvt. He primarily works as an Architect Consultant and provides consultancy on how to design and develop .NET centric database solutions.

Suprotim is the founder and primary contributor to DotNetCurry, DNC .NET Magazine, SQLServerCurry and DevCurry. He has also written an EBook 51 Recipes using jQuery with ASP.NET Controls. and is authoring another one at The Absolutely Awesome jQuery CookBook.

Follow him on twitter @suprotimagarwal


Page copy protected against web site content infringement by Copyscape


User Feedback
Comment posted by Jácint on Tuesday, October 28, 2008 2:33 PM
It was really useful! I googled a lot to find some good article but this was the best.Thnx
Comment posted by Suprotim Agarwal on Wednesday, October 29, 2008 12:27 AM
Thanks Jácint!
Comment posted by Pete on Wednesday, October 29, 2008 8:48 AM
Here is the best tip.  Check out JQuerry for ajax.  Here is one example (there are many) http://docs.jquery.com/UI/Accordion

Notice how small the code is.  Smaller code less chance of typeo
Comment posted by Suprotim Agarwal on Wednesday, October 29, 2008 10:38 PM
Pete: I am a big fan of Jquery and I agree with you!
Comment posted by venkat on Wednesday, January 21, 2009 7:18 AM
dsad
Comment posted by Mohan on Saturday, March 7, 2009 12:10 PM
Nice Article.
You really understand the need of beginners. But provide screen shots also.
thanks.
Comment posted by Aaron on Wednesday, March 11, 2009 9:31 AM
Great Article, but I'm a newbie, so please bear with me.
Where does the Accordion Extender get setup?
The following code isn't "finding" anything
$find('AccordionCtrl_AccordionExtender');
Comment posted by Rohit Hans on Friday, March 20, 2009 7:02 AM
Great article indeed.
Comment posted by Alok Arora on Friday, March 20, 2009 9:06 AM
Hi Aaron,

I agree to Rohit Hans, that Article is great and yes your point is also valid.
The Code ($find('AccordionCtrl_AccordionExtender');) actually consists "AccordionCtrl" as the Accordion Control's ClientID, "_" as the delimeter and "AccordionExtender" as the PostFix for Ajax Control Toolkit. You access your control like this :

var MyAccordion = $find("<YourAccordionControl's ClientID>_"AccordionExtender");

Enjoy ;)

:) Happy Programming :)
Join My ASP.NET Knowledge Base group by sending "ADD ME!" to gordo_matthews0207@yahoo.ca
Comment posted by Roshni on Friday, April 3, 2009 4:59 AM
Indeed, this article is very helpful. But, can also help me hide all panes on page load. Only when i click the Accordion control, should the content pane be visible. Any suggestions ?
Comment posted by Suprotim Agarwal on Sunday, April 5, 2009 7:20 AM
Roshni: Check if this links helps - http://forums.asp.net/t/1358169.aspx
Comment posted by Janet on Monday, April 6, 2009 2:10 PM
Love the article, but can't get the mouseover to work. Not in IE7 or Firefox.  Does it matter if the css contains background images?
Comment posted by Brandon on Wednesday, June 10, 2009 4:34 PM
The javascript to add a pane during pageLoad yeilded odd results in firefox 3.0.1; no text for either the header or content. It does work IE 8. Other than this firefox issue, this is great! Thank you.

Anyone have any ideas/suggestions on implementing the mouseover on accordions within accordions within accordions. So far, I have only been able to make the mouseOver work on the outer most (top) level of accordion. Thanks.
Comment posted by Matt j Crawford on Tuesday, June 16, 2009 2:43 AM
function getAccordian()  
{
        return $find('<%= AccordionCtrl.ClientID %>_AccordionExtender');
}
Comment posted by Matt j Crawford on Tuesday, June 16, 2009 2:53 AM
Excellant article,

Rather than loose the nice animation by manually setting the styles, setting the index to -1 works a charm

getAccordian().set_SelectedIndex(-1)
Comment posted by Nik on Wednesday, April 7, 2010 4:13 AM
really good one....
Comment posted by charo madrigal on Wednesday, April 21, 2010 6:50 AM
very, very useful, thank you so much!!!
Comment posted by Pierre on Wednesday, April 21, 2010 9:25 AM
Hi

I have an issue with this code.
On load, I can see the four panels, only the first one is expanded as it must.
But when i try to expand the other one, nothing happens.

Any idea what that could be?

Comment posted by Ezz on Wednesday, April 28, 2010 10:07 PM
I find that if you have AutoSize set to anything other than "None", the header of the dynamically-added pane vanishes when you select other panes. (Or rather, it collapses down to a single pixel in height).
Presumably the control isn't re-calculating the size of its contents.
Comment posted by Ezz on Wednesday, April 28, 2010 10:14 PM
I found setting the AutoSize parameter in client script fixes the bug mentioned above:

newAccordion.set_AutoSize(AjaxControlToolkit.AutoSize.Limit);
Comment posted by JohnInNZ on Tuesday, June 1, 2010 7:24 PM
Quick note regarding adding Panes programatically.
If you are adding more than 1 pane you need to set the "paneID"
-----------sample below--------------------

String testItem = "here is some data";
AjaxControlToolkit.AccordionPane pane1 = new AjaxControlToolkit.AccordionPane();
pane1.ID = "pane1"; // <--- add this, must be unique for each pane
pane1.HeaderContainer.Controls.Add(new LiteralControl("Pane 1"));
pane1.ContentContainer.Controls.Add(new LiteralControl(testItem.ToString()));
MyAccordion.Panes.Add(pane1);
Comment posted by Larissa on Friday, February 11, 2011 8:10 AM
I wish I had found this article earlier ! I had a lot of problems trying to do some of these things.
Comment posted by KW on Tuesday, July 19, 2011 1:05 PM
thanks... example #4 ultimately helped me figure out how to change an expand/collapse image when a pane is clicked
Comment posted by Mex on Monday, September 26, 2011 3:55 AM
thanks for the article. I have struggled with this for days now but I still get the same result.

$find('<%= AccordionCtrl.ClientID %>_AccordionExtender') returns null what Im Idoing wrong. Please help
Comment posted by Hemant on Monday, October 31, 2011 9:34 AM
I hv read your article, was very good.
I want to Prevent the Click event on Accordion Header Content and i am getting the following error
Microsoft JScript runtime error: Sys.InvalidOperationException: Handler was not added through the Sys.UI.DomEvent.addHandler method.

also below is code written
foreach (DataRow dr in ds.Tables[0].Rows)
        {
            HyperLink HyplAccTitle = new HyperLink();
            HyplAccTitle.Text = dr["MnuDesc"].ToString().Trim();
            HyplAccTitle.NavigateUrl = dr["URL"].ToString().Trim();
            HyplAccTitle.Target = "mainFrame";
            //HyplAccContent.Text = dr["MnuId"].ToString();
            AjaxControlToolkit.AccordionPane accordpane = new AjaxControlToolkit.AccordionPane();
            //accordpane.ContentContainer.Enabled = false;
            accordpane.HeaderContainer.Controls.Add(HyplAccTitle);
            accordpane.HeaderContainer.ID = "HC" + dr["MnuId"].ToString();
            accordpane.ContentContainer.ID = "CC" + dr["MnuId"].ToString();
            
            //accordpane.ContentContainer.Height = Unit.Pixel(0);
            accordpane.ID = dr["MnuId"].ToString();
            foreach (DataRow Childdr in ds.Tables[0].Select("ParentId<>0"))
            {
                if (Childdr["Parentid"].ToString().Trim() == dr["Mnuid"].ToString().Trim())
                {
                    HyperLink HyplAccContent = new HyperLink();
                    HyplAccContent.Text = Childdr["MnuDesc"].ToString().Trim();
                    HyplAccContent.NavigateUrl = Childdr["URL"].ToString().Trim();
                    HyplAccContent.Target = "mainFrame";

                    accordpane.ContentContainer.Visible = true;
                    accordpane.ContentContainer.Controls.Add(HyplAccContent);
                    --i;
                }
                else
                {
                    accordpane.HeaderContainer.Attributes.Add("onclick", "RemoveHandlerAtRuntime(" + i + ")");
                }
            }
            Accordion1.Panes.Add(accordpane);
            accordpane.Dispose();
            ++i;
        }
and ur given script (RemoveHandlerAtRuntime(pane))
is incorporated in aspx design file

Please help to resolve this error
THanks
Hemant
Comment posted by Hemant on Monday, October 31, 2011 9:38 AM
I hv read your article, was very good.
I want to Prevent the Click event on Accordion Header Content and i am getting the following error
Microsoft JScript runtime error: Sys.InvalidOperationException: Handler was not added through the Sys.UI.DomEvent.addHandler method.

also below is code written
foreach (DataRow dr in ds.Tables[0].Rows)
        {
            HyperLink HyplAccTitle = new HyperLink();
            HyplAccTitle.Text = dr["MnuDesc"].ToString().Trim();
            HyplAccTitle.NavigateUrl = dr["URL"].ToString().Trim();
            HyplAccTitle.Target = "mainFrame";
            //HyplAccContent.Text = dr["MnuId"].ToString();
            AjaxControlToolkit.AccordionPane accordpane = new AjaxControlToolkit.AccordionPane();
            //accordpane.ContentContainer.Enabled = false;
            accordpane.HeaderContainer.Controls.Add(HyplAccTitle);
            accordpane.HeaderContainer.ID = "HC" + dr["MnuId"].ToString();
            accordpane.ContentContainer.ID = "CC" + dr["MnuId"].ToString();
            
            //accordpane.ContentContainer.Height = Unit.Pixel(0);
            accordpane.ID = dr["MnuId"].ToString();
            foreach (DataRow Childdr in ds.Tables[0].Select("ParentId<>0"))
            {
                if (Childdr["Parentid"].ToString().Trim() == dr["Mnuid"].ToString().Trim())
                {
                    HyperLink HyplAccContent = new HyperLink();
                    HyplAccContent.Text = Childdr["MnuDesc"].ToString().Trim();
                    HyplAccContent.NavigateUrl = Childdr["URL"].ToString().Trim();
                    HyplAccContent.Target = "mainFrame";

                    accordpane.ContentContainer.Visible = true;
                    accordpane.ContentContainer.Controls.Add(HyplAccContent);
                    --i;
                }
                else
                {
                    accordpane.HeaderContainer.Attributes.Add("onclick", "RemoveHandlerAtRuntime(" + i + ")");
                }
            }
            Accordion1.Panes.Add(accordpane);
            accordpane.Dispose();
            ++i;
        }
and ur given script (RemoveHandlerAtRuntime(pane))
is incorporated in aspx design file

Please help to resolve this error
THanks
Hemant
Comment posted by Hemant on Monday, October 31, 2011 9:44 AM
I hv read your article, was very good.
I want to Prevent the Click event on Accordion Header Content and i am getting the following error
Microsoft JScript runtime error: Sys.InvalidOperationException: Handler was not added through the Sys.UI.DomEvent.addHandler method.

also below is code written
foreach (DataRow dr in ds.Tables[0].Rows)
        {
            HyperLink HyplAccTitle = new HyperLink();
            HyplAccTitle.Text = dr["MnuDesc"].ToString().Trim();
            HyplAccTitle.NavigateUrl = dr["URL"].ToString().Trim();
            HyplAccTitle.Target = "mainFrame";
            //HyplAccContent.Text = dr["MnuId"].ToString();
            AjaxControlToolkit.AccordionPane accordpane = new AjaxControlToolkit.AccordionPane();
            //accordpane.ContentContainer.Enabled = false;
            accordpane.HeaderContainer.Controls.Add(HyplAccTitle);
            accordpane.HeaderContainer.ID = "HC" + dr["MnuId"].ToString();
            accordpane.ContentContainer.ID = "CC" + dr["MnuId"].ToString();
            
            //accordpane.ContentContainer.Height = Unit.Pixel(0);
            accordpane.ID = dr["MnuId"].ToString();
            foreach (DataRow Childdr in ds.Tables[0].Select("ParentId<>0"))
            {
                if (Childdr["Parentid"].ToString().Trim() == dr["Mnuid"].ToString().Trim())
                {
                    HyperLink HyplAccContent = new HyperLink();
                    HyplAccContent.Text = Childdr["MnuDesc"].ToString().Trim();
                    HyplAccContent.NavigateUrl = Childdr["URL"].ToString().Trim();
                    HyplAccContent.Target = "mainFrame";

                    accordpane.ContentContainer.Visible = true;
                    accordpane.ContentContainer.Controls.Add(HyplAccContent);
                    --i;
                }
                else
                {
                    accordpane.HeaderContainer.Attributes.Add("onclick", "RemoveHandlerAtRuntime(" + i + ")");
                }
            }
            Accordion1.Panes.Add(accordpane);
            accordpane.Dispose();
            ++i;
        }
and ur given script (RemoveHandlerAtRuntime(pane))
is incorporated in aspx design file

Please help to resolve this error
THanks
Hemant
Comment posted by Jack Himoff on Friday, December 16, 2011 1:30 PM
This is to Hemant...

You're annoying with you constant posting of the same code! GOOGLE IT AND YOU WILL FIND YOUR ANSWERS!
Comment posted by Dov on Thursday, December 29, 2011 4:21 AM
Your article is helpful. I'm using an accordion in a loginView bound to a WebSiteMapDataSource to create different menues for different types of users. For one type of user all the headers have no child nodes. How can I cause that accordion not to expand? Because this depends on login I understnd that placing reference to the function in the page load won't work. I'm weak in javascript so a detailed answer or c# code behind option would be very helpful.
Thank you
Dov
Comment posted by Armstrong on Tuesday, January 10, 2012 6:36 AM
Thanks for the code, helped me.. :)
Comment posted by Thabo Manqele on Monday, February 6, 2012 1:13 AM
Thank you for the code, very useful
Comment posted by Ravi on Wednesday, February 8, 2012 4:04 AM
Hi Suprotim

After incorporating below scrip to find selected pane
<script type="text/javascript">
        function pageLoad()
        {
var accCtrl = $find('AccordionCtrl_AccordionExtender');
            accCtrl.add_selectedIndexChanged(onAccordionPaneChanged);  
        }

              
        function onAccordionPaneChanged(sender, eventArgs)
        {
            var selPane = sender.get_SelectedIndex() + 1;
            alert('You selected Pane ' + selPane);
        }
    </script>


i am getting following error, any suggestion would be appreciated.

Microsoft JScript runtime error: Unable to get value of the property 'add_selectedIndexChanged': object is null or undefined

Regards
Ravi
Comment posted by Ravi on Wednesday, February 8, 2012 4:32 AM
Hi Suprotim

Kindly ignore above mail, i have resolve it, i was searching wrong accordion control.

Your article really help me

Thanks much



Regards
Ravi
Comment posted by Ravi on Wednesday, February 8, 2012 6:12 AM
Hi Suprotim

Is it possible to get accordion pane name instead of selected index id, any suggestion would be appreciated.



Regards
Ravi
Comment posted by Victor on Friday, March 16, 2012 7:19 AM
I am getting the following error when i run a application

Server Error in '/GContact' Application.
--------------------------------------------------------------------------------

The control with ID 'AccordionCtrl_AccordionExtender' requires a ScriptManager on the page. The ScriptManager must appear before any controls that need it.
Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code.

Exception Details: System.InvalidOperationException: The control with ID 'AccordionCtrl_AccordionExtender' requires a ScriptManager on the page. The ScriptManager must appear before any controls that need it.

Source Error:

An unhandled exception was generated during the execution of the current web request. Information regarding the origin and location of the exception can be identified using the exception stack trace below.  

Stack Trace:


[InvalidOperationException: The control with ID 'AccordionCtrl_AccordionExtender' requires a ScriptManager on the page. The ScriptManager must appear before any controls that need it.]
   System.Web.UI.ExtenderControl.get_ScriptManager() +185
   System.Web.UI.ExtenderControl.RegisterWithScriptManager() +109
   System.Web.UI.ExtenderControl.OnPreRender(EventArgs e) +20
   AjaxControlToolkit.ExtenderControlBase.OnPreRender(EventArgs e) in d:\E\AjaxControlToolkit_AjaxTk\Orcas\AjaxControlToolkit\ExtenderBase\ExtenderControlBase.cs:367
   System.Web.UI.Control.PreRenderRecursiveInternal() +170
   System.Web.UI.Control.PreRenderRecursiveInternal() +292
   System.Web.UI.Control.PreRenderRecursiveInternal() +292
   System.Web.UI.Control.PreRenderRecursiveInternal() +292
   System.Web.UI.Page.ProcessRequestMain(Boolean includeStagesBeforeAsyncPoint, Boolean includeStagesAfterAsyncPoint) +4774




--------------------------------------------------------------------------------
Version Information: Microsoft .NET Framework Version:2.0.50727.3625; ASP.NET Version:2.0.50727.3634


Pls help me
Comment posted by siva on Friday, April 27, 2012 8:10 AM
Hi All,
I have two accordion panel in my webform.

1. i have one panel in it & initially in open mode
2. i have 3 panels in it & initially closed.

Here If i open any one of panel in second accordion panel
first accordion will be close & If all are in closed mode
then 1st accordion pane will be open.

How to do this?
Comment posted by Anand Kumar on Tuesday, August 7, 2012 7:42 AM
I search a lot, but only this article I found useful. Thanks a lot.
Comment posted by bilalmahmud on Thursday, October 18, 2012 8:54 AM
how can i make image gallery using accordion control?
Comment posted by lenny on Wednesday, December 19, 2012 11:38 AM
<script type="text/javascript">

        function pageLoad()

        {

            changeSelected(2); // expand pane 3

        }

        

        // expand given accordion pane

        function changeSelected(idx)

        {

            $find('AccordionCtrl_AccordionExtender').set_SelectedIndex(idx);

        }

    </script>

isn't working, "set_SelectedIndex" generate error
Comment posted by Jerry Beckett on Thursday, February 14, 2013 12:06 PM
I'm having the same problem as Mex above:

$find('<%= AccordionCtrl.ClientID %>_AccordionExtender') returns null

I also tried

$find('#<%= AccordionCtrl.ClientID %>_AccordionExtender')

and that returns null also.

Yes, I have a ScriptManager on the page.

Frustrated.
Comment posted by Simon on Tuesday, April 16, 2013 9:18 AM
Your article has been plagiarised...
http://www.aspnethostingnews.com/index.php/archives/790
imitation is the most sincere form of flattery.
Comment posted by Prabu on Monday, July 8, 2013 11:59 PM
Thanks for ur tips sir.. Will u pls tell me about Accordion menu which has three sub menu and if one of the sub menu is clicked redirect to another page?.... i m very confused sir
Comment posted by harveen singh on Friday, July 19, 2013 10:43 AM
awesum work man keep it up :)
Comment posted by mansi on Wednesday, August 7, 2013 6:28 AM
Its just awesome
thank you so much
i just love javascript , by still weak
bt its helps me alot
thanku
Comment posted by Aman on Monday, September 22, 2014 3:06 AM
hello
i am using slideshowextender that is showing image from data base with its default  changing effect ,but i want to move images right to left Plz help me out.......
mail me @ :amanssit@gmail.com
Comment posted by Aman on Monday, September 22, 2014 3:10 AM
hello
i am using slideshowextender that is showing image from data base with its default  changing effect ,but i want to move images right to left Plz help me out.......
mail me @ :amanssit@gmail.com
Comment posted by Aman on Monday, September 22, 2014 4:11 AM
hello
i am using slideshowextender that is showing image from data base with its default  changing effect ,but i want to move images right to left Plz help me out.......
mail me @ :amanssit@gmail.com

Post your comment
Name:  
E-mail: (Will not be displayed)
Comment:
Insert Cancel