Multiple controls with the same ID '_header' were found. FindControl requires that controls have unique IDs.

I was having this issue last year when I upgraded a website from ASP.NET 2.0 to 3.5, and it took me ages to figure out what was going wrong.

Since then I've had developers thanking me for the solution so I thought I'd blog about it in case others are having a similar problem :)

Basically it seems with 3.5 each AJAX Control Toolkit Accordion Pane needs its own ID and to be ran at server. Then, when rendered the header appears as 'accordionpaneid_header' and the content appears as 'accordionpaneid_content'.

As none of my accordion panes had an id, they were all rendering as '_header', which obviously can't be allowed. I would imagine that if the header wasnt causing an error, the next error would be on '_content'.

So if you simply put an ID and 'runat="server"' on each of your existing accordion panes, you should no longer get this error.

CollapsiblePanel: Multiple controls for closing panel

When using the CollapsiblePanel from the AJAX Control Toolkit, you are limited to only one control to collapse/close each panel. This can be restrictive if you wish to use the control which opens the panel (as a 'toggle' control) and have another control (which perhaps sits inside the panel) for closing.

A way round this is to assign a 'BehaviourID' to your Collapsible Panel, and use the following javascript code to action the closing of the panel:

<ajaxToolkit:CollapsiblePanelExtender ID="cpe" runat="Server"
BehaviorId="myBehaviorID"
TargetControlID="InfoPanel"
CollapsedSize="0"
Collapsed="True"
ExpandControlID="OpenCloseControl"
CollapseControlID="OpenCloseControl"
ImageControlID="HideShowImage"
ExpandDirection="Vertical" />

Javascript:

function CloseCpe()
{
$find("myBehaviorID")._doClose();
}


Then on any other control on your page, you add 'CloseCpe'

Javascript Classes

The problem with having a lot of javascript functions on your website is that you can begin to forget what each function refers to, and which function names you have already used previously.

For example, if I was creating some javascript for my website's main navigation bar, I might have a function which opens/closes a sub navigation list called 'toggleSubNav'. If the website has a product categories section, I might also need a different javascript function, and there is a chance I could also call this 'toggleSubNav'.

Using javascript classes allows you to better organise your functions. So if the basic outline for my main navigation function was:

function toggleSubNav()
{
}

This could be changed to:

var mainNavigation =
{
toggleSubNav: function ()
{
}
}


Then I would use mainNavigation.toggleSubNav when referring to this function in my HTML or another javascript function.