Mutual Exclusive CollapsiblePanelExtender

The following piece of code will allow you to have multiple ASP.NET 2.0 Ajax CollapsiblePanelExtender controls on a single page and only one of them will be expanded at a time. You can use this to keep the page length short. You must set the BehaviorId of the CollapsiblePanelExtender, that is what the $find javascript function looks for. Make sure to add all the BehaviorIds to the array in the pageLoad function.

<script type="text/javascript">

// WWB: Handles Mutual Exclusive Expansion.  Only One Extender Panel 
// Can Be Open At A Time

var extenders = [];
function pageLoad(sender, args)
    extenders[0] = $find("PanelExtender1");
    extenders[1] = $find("PanelExtender2");
    extenders[2] = $find("PanelExtender3");

    // WWB: Hook All The Extenders, If extenders[i] is null then
    // the extenders is not being displayed -- i.e. not visible
    for (var i=0; i< extenders.length; i++)
        if (extenders[i] != null)
            extenders[i].add_expandComplete( expandHandler );

function expandHandler(sender, args)
    for (var i=0; i< extenders.length; i++)
        if ((extenders[i] != null) && (extenders[i] != sender))



  1. Great stuff. Works well.

  2. This works excellent....I searched all over the web for this. Finally someone got it right!
    Being able to force having just one CollapsiblePanelExtender open at a time is great! Thanks a million!

  3. Thank you very much, works perfectly

  4. where would i call pageLoad if i am using it in a content page

  5. Thank you very much.... :) This code is perfect..! Xoxo... :)


Post a Comment

Popular posts from this blog

Yet once more into the breech (of altered programming logic)

Simple WP7 Mango App for Background Tasks, Toast, and Tiles: Code Explanation

How to convert SVG data to a Png Image file Using InkScape