Asp.Net Ajax Accoridian Control

Assalamualaykum Wr Br…Today we explore the Asp.Net Ajax Accordian Control. Before we explore in to it, lets understand few points about Ajax. Ajax stand for:
A – Asynchronous
J – Javascript
A – And
X – Xml

The Accordion is a web control that allows you to provide multiple panes and display them one at a time. It is like having several CollapsiblePanels where only one can be expanded at a time. The Accordion is implemented as a web control that contains AccordionPane web controls. Each AccordionPane control has a template for its Header and its Content. We keep track of the selected pane so it stays visible across postbacks. Lets quickly start POC of it as shown below:

Drag drop the Script Manager from tool box of the Visual studio then drag and drop accordian control from ajax tool tab. Under tags of accordian control provide <panes&> tags and specify or drag and drop accordianpane controls and under which, you find header and contents tags where specify the header to be displayed and content to be displayed on click to header whose pocs are shown below:
The output of the above pocs are shown:


Leave a Reply

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

You are commenting using your 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