articles

Ajax Toolkit Accordion Control in Asp.net

Pushpendra Singh14184 06-Dec-2010

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

Ajax Toolkit Accordion Control in Asp.net

When you click User Login then user login panel will open and admin login panel will collapse.

 

Ajax Toolkit Accordion Control in Asp.net

 

 


Updated 07-Sep-2019

Leave Comment

Comments

Liked By