• USA : +1 973 910 5725
  • INDIA: +91 905 291 3388
  • info@tekslate.com
  • Login

Ajax Accordion Control

Accordion

Accordion control is used to provide a number of panes on the page allow the user to expand a panel by clicking on its header when user select a pane then all other panes available in the accordion control will be automatically collapsed.

Properties

FadeTransitions :

Used to specify whether or not the FadeTransition effect will apply to the pane whenever it is expanded or collapsed.

Framespersecond :

Used to specify no of frame to change within a second while applying Fade Transitions.

Transition Duration : 

Used to specify the time in Millie-seconds for the total transition to complete

Headercssclass :

Used to specify the css class you want to use to display the header for accordion panes available within Accordion control when it is not selected.

Headerselectedcssclass :

Used to specify the css class to use to display the header of Accordion panes when they are selected.

Required opened pane :

Indicates whether or not atleast one pane is opened within the accordion control.

Use the property panes to create panes within the accordion control & for every pane you have to specify header& content where header is used to specify heading for that & content is used to specify the context to display within that pane.

Example

The following example demonstrates how to use the accordion.

Add a page to the website and then take a Toolkit scriptmanager on the page and within the HTML source of the page within the headsection create two css class with the names ‘header’ & ‘Selectedheader’ as follows

<style type=”text/css”>

.header

{

background-color:Black;

font-family  :       Arial Black;

font-size       : large;

color:white;

}

.selected header

{

background-color:Blue :

font-family:Arial Black:

font-size   :large;

color : white ;

}

Within HTML source of the page itself drag& drop an accordion control and design it as follows with two Accordion panes.

<asp: Accordion ID=”Accordion1”  runat=”server” FadeTransitions=”true” Headercssclass=”header” Framepersecond=”30” TransitionDuration=”2000” Headerselectedcssclass=”selectedheader” requireiopenedpane=”true”>  <panes>

<asp:Accordionpane Id=”AP1” runat=”server”>

<Header>

This is Accordion Panel

</Header>  <context>

This is according panel context <br/>

This is Accordion panel context <br/>

——————

——

</context>

</asp:Accordionpane>

<asp:Accordiopane Id=”AP2” runat=”server”>

<Header>

This is Accordion pane 2

</Header>

<context>

This is Accordion pane 2 context <br/>

This is Accordion pane 2 context <br/>

—-

——————-

</context>

</asp:Accordionpane>

</panes>

</asp:Accordion>

 

Summary
Review Date
Reviewed Item
Ajax Accordion Control
Author Rating
5

“At TekSlate, we are trying to create high quality tutorials and articles, if you think any information is incorrect or want to add anything to the article, please feel free to get in touch with us at info@tekslate.com, we will update the article in 24 hours.”

0 Responses on Ajax Accordion Control"

Leave a Message

Your email address will not be published. Required fields are marked *

Site Disclaimer, Copyright © 2016 - All Rights Reserved.