Ajax Control Toolkit has introduced Accordion web control which allows providing multiple panes and displays one at a time1. It is built as a collection of AccordionPane web controls. This article shows an enhancement to have a Show All/ Collapse All feature which would allow to View or Collapse all the panes. The figures below show the Show All and Collapse All states with the suggested enhancement.
Figure 1: Show all panes
Figure 2: Collapse all panes
The function takes a Boolean argument which tells whether the Accordion control needs to be in a Show All or a Collapse All mode. As a first step during both the Show All and Collapse All states, the selected index is reset (to -1) to not have any active panes. The control iterates through its panes collection, and resets their existing animation state. Depending on the input argument, the animation of each pane is set to either "fade in" (Show All) or "fade out" (Collapse All), and all the panes are either opened or closed respectively.
Figure 3: _expandAllPanes function added to the AccordionBehavior prototype
The example shown in Figure 4 shows how to use the added newly added function via the client scripts shown in Figure 5. There are two buttons on the page which can be used to Show/Collapse all panes. There is a client side function associated with them which calls the _expandAllPanes function. A user can alternately use a single Checkbox with a Show All/Collapse All feature.
Figure 4 Example demonstrating the use of Show all/ Collapse all feature
The client side functions are simply a wrapper over _expandAllPanes function and are listed below in Figure 5.
By having a Show All/ Collapse All feature, the Accordion control can be used in multiple scenarios where one would want to get a complete snapshot of the data. Another useful scenario is to display parent-child relationships where the child collections may be in a collapsed mode and shown only when requested.
This article is a result of notes made by my understanding on this subject and is meant purely for educational purposes. Any resemblance to other material is un-intentional coincidence and should not be misconstrued as malicious or slanderous.