Collapsible panel is one of the exotic controls present in Ajax Control Toolkit of ASP.NET. Apart from several built in functionalities, there are situations when the user needs to close (collapse) or open (expand) the collapsible panel through script. Further, there are “ExpandControlId” and “CollapseControlId” attributes present in the collapsible panel to control the collapse and expand on click events of respective assigned controls , yet sometimes we need to do it by other events. Take the following situations as examples:-
: > On pageLoad we need some collapsible panels to be collapsed others be expanded.
: > On click or mouseover events of controls other than the controls assigned for Expand/Collapse of collapsible panel .
: > Suppose one collapsible panel is expanded and we want to collapse it when another expanded.
|
In above situation we need to write script to expand and collapse the panels. There are two methods available :-
For collapse
$find(“collapsiblePanelInfo”).collapsePanel(true);
For Expand
$find(“collapsiblePanelInfo”).expandPanel(true);
Here the matter of concern is the $find() method . It is a JQuery syntax to find the collapsible panel with BehaviourId=”cpeInfo” (not id).
Ajax Control Toolkit is written using clientside script with JQuery library. So it the $find() syntax works fine.
The BehaviourId is supplied at the time of collapsible panel declaration .
On the server side or say in .cs page we can use
collapsiblePanelInfo.Collapsed=true; // for collaspse.
collapsiblePanelInfo.Collapsed=false; // for expand.
|