The Accordion is a web control that allows you to provide multiple panes and display them one at a time. The Accordion is implemented as a web control that contains AccordionPane web controls
Accordion Properties:
· SelectedIndex - The AccordionPane to be initially visible
· FadeTransitions - True to use the fading transition effect, false for standard transitions.
· TransitionDuration - Number of milliseconds to animate the transitions
· FramesPerSecond - Number of frames per second used in the transition animations
· AutoSize - Restrict the growth of the Accordion.
· RequireOpenedPane - Prevent closing the currently opened pane when its header is clicked (which ensures one pane is always open). The default value is true.
· SuppressHeaderPostbacks - Prevent the client-side click handlers of elements inside a header from firing.
· Panes - Collection of AccordionPane controls.
· AccordionPane contains other control which will expand and collapse.
· HeaderTemplate - The Header template contains the markup that should be used for an pane's header when databinding.
· ContentTemplate - The Content template contains the markup that should be used for a pane's content when databinding.
Code:
<%-- ScriptManager control manages client script for AJAX enabled ASP.NET pages.This enables partial-page rendering and Web-service calls.You have to used this if you want to use ajax control toolkit--%>
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<%-- Add Accordian control from AjaxControl Toolkit--%>
<cc1:Accordion ID="Accordion1" runat="server" FadeTransitions="true" TransitionDuration="100" FramesPerSecond="30" AutoSize="None" SuppressHeaderPostbacks="true">
<%-- Add Pane section here--%>
<Panes>
<%-- Add pane for admin login here--%>
<cc1:AccordionPane ID="AccordionPane1" runat="server">
<Header>
<asp:Panel ID="Panel2" runat="server" BackColor="BlueViolet"><asp:Label ID="Label1" runat="server" Text="AdminLogin"></asp:Label>
</asp:Panel>
<asp:Panel ID="Panel7" runat="server" Height="10px"></asp:Panel>
</Header>
<Content>
<asp:Panel ID="Panel1" runat="server">
<asp:Login ID="Login1" runat="server"></asp:Login>
</asp:Panel>
</Content>
</cc1:AccordionPane>
<%-- Add pane for User login here--%>
<cc1:AccordionPane ID="AccordionPane2" runat="server">
<Header>
<asp:Panel ID="Panel3" runat="server" BackColor="BlueViolet">
<asp:Label ID="Label2" runat="server" Text="User Login"> </asp:Label>
</asp:Panel>
<asp:Panel ID="Panel8" runat="server" Height="10px"></asp:Panel>
</Header>
<Content>
<asp:Panel ID="Panel4" runat="server">
<asp:Login ID="Login2" runat="server"></asp:Login>
</asp:Panel>
</Content>
</cc1:AccordionPane>
</Panes>
</cc1:Accordion>
Run the project
Default AdminLogin panel is open
When you click User Login then user login panel will open and admin login panel will collapse.
Leave Comment