Vertical ASP.Net AJAX Collapsible Panels:

Horizontal ASP.Net AJAX Collapsible Panels:

In the “Vertical” figure above, the panels are stacked from left-to-right. In the “Horizontal” figure they are stacked from top-to-bottom. In traditional “Accordion” controls the panels would all be stacked top-to-bottom separated by their toggling elements (headers) whereas this method allows you to completely break out of that model and place not only the togglers anywhere, but the panels themselves as well.

For both examples I am using the following form elements markup:

Note: I am intentionally showing both possible values of ”ExpandDirection”

And the following script:

Notice the use of numerical values as the “target” argument to the “TogglePanels” function. The number is matched to the proper CollapsiblePanelExtender using the js function “endsWith”, such that all CollapsiblePanelExtender’s that do not match are collapsed and the one that does match is collapsed only if it is currently expanded. You might have noticed that you can use this condition to your advantage by having two CollapsiblePanelExtender controls, each ending in the same target (ie. cpe3 and cpe33) such that expanding the second then expanding or collapsing the first would allow the second to remain open.

Whether the panels expand horizontally or vertically depends on the CollapsiblePanelExtender attribute “ExpandDirection”, which accepts either “Horizontal” or “Vertical” , and the finishing touch can be accomplished using CSS.

-mwm

]]> http://www.dlocc.com/articles/open-one-panel-at-a-time-using-collapsible-panels/feed/ 0