Can ASP.NET AJAX CollapsiblePanelExtender to act like an Accordion control?

The Accordion is a web control that allows you to provide multiple panes and display them one at a time.
When one of the panels is expanded, the other collapses. so can i do the same thing using CollapsiblePanelExtender?
“Yessss of course u can do that surely!” ūüôā
Add two Panels and corresponding CollapsiblePanelExtenders for the two Panels as shown below:
<!– Panel 1 –>
<div class=”TitleBC”><table cellspacing=”0″ cellpadding=”0″ width=”100%” border=”0″><tbody> <tr> <td><asp:Label runat=”server” Height=”15″ Text=”User Profile” Font-Bold=”True”></asp:Label></td><td align=”right”> <asp:Image ID=”_arrowDownProfile” runat=”server” ImageUrl=”~/ArrowDown.png” Height=”15″ CssClass=”CursorHand”></asp:Image> </td> </tr> </tbody> </table>
</div>
<div><asp:Panel ID=”pnlUserProfile” runat=”server”> Panel 1 content goes here</asp:Panel> </div>
<!– Panel 2 –>
<div¬†class=”TitleBC”><table cellspacing=”0″ cellpadding=”0″ width=”100%” border=”0″><tbody> <tr> <td><asp:Label runat=”server” Height=”15″ Text=”User History” Font-Bold=”True”></asp:Label></td><td align=”right”> <asp:Image ID=”_arrowDownHistory” runat=”server” ImageUrl=”~/ArrowDown.png” Height=”15″ CssClass=”CursorHand”></asp:Image> </td> </tr> </tbody> </table>
</div>
<div><asp:Panel ID=”pnlUserHistory” runat=”server”>Panel 2 content goes here</asp:Panel> </div>
<ajaxToolkit:CollapsiblePanelExtender ID=”_collapsiblePanelExtender1″ runat=”server” CollapseControlID=”_arrowDownProfile”¬†¬† ¬† ¬† ¬†SuppressPostBack=”false” ExpandControlID=”_arrowDownProfile” TargetControlID=”pnlUserProfile”¬†¬† ¬† ¬† ¬†ImageControlID=”_arrowDownProfile” ExpandedImage=”~/ArrowUp.png” CollapsedImage=”~/ArrowDown.png” Collapsed=”false” BehaviorID=”extenderProfile”>¬†¬† ¬†</ajaxToolkit:CollapsiblePanelExtender>
<ajaxToolkit:CollapsiblePanelExtender ID=”_collapsiblePanelExtender2″ runat=”server” CollapseControlID=”_arrowDownHistory”¬†¬† ¬† ¬† ¬†SuppressPostBack=”false” ExpandControlID=”_arrowDownHistory” TargetControlID=”pnlUserHistory”¬†¬† ¬† ¬† ¬†ImageControlID=”_arrowDownHistory” ExpandedImage=”~/ArrowUp.png”¬†¬† ¬† ¬† ¬†CollapsedImage=”~/ArrowDown.png” Collapsed=”true” BehaviorID=”extenderHistory”>¬†¬† ¬†</ajaxToolkit:CollapsiblePanelExtender>
JavaScript will do the trick!
<script type=”text/javascript”>
/* Collapsible Extender event handlling */
function pageLoad(sender, args) {
$find(“extenderProfile”).add_expandComplete(expandHandlerProfile); $find(“extenderHistory”).add_expandComplete(expandHandlerHistory);
}
function expandHandlerProfile(sender, args) {
$find(“extenderHistory”)._doClose();
}
function expandHandlerHistory(sender, args) {
$find(“extenderProfile”)._doClose();
}
</script>
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: