Accordionコントロールは、アコーディオンが伸縮するかのように、クリックされたヘッダーに対応するペインがアニメーションしながら表示するコントロールです。
Accordionコントロールの動作を実際に確認したい場合は、ここにアクセスしてみてください。
Accordionコントロールは、複数のペインから構成されます。
また1つのペインは、1つのヘッダーと1つのコンテンツから構成されています。
最低限必要なソースは下記の通りです。
<ajaxToolkit:Accordion ID="Accordion1" runat="server">
<Panes>
<ajaxToolkit:AccordionPane runat="server" >
<Header>ヘッダー1</Header>
<Content>コンテンツ1</Content>
</ajaxToolkit:AccordionPane>
</Panes>
</ajaxToolkit:Accordion>
ペインを増やすには、上記の<Panes>～</Panes>を追加します。
3つのペインを持つAccordionコントロールを表示させてみましょう。
ソースは以下の通りです。
Accordion.aspx
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Accordionテスト1</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<div>
<ajaxToolkit:Accordion ID="Accordion1" runat="server">
<Panes>
<ajaxToolkit:AccordionPane runat="server" >
<Header>ヘッダー1</Header>
<Content>コンテンツ1</Content>
</ajaxToolkit:AccordionPane>
</Panes>
<Panes>
<ajaxToolkit:AccordionPane runat="server">
<Header>ヘッダー2</Header>
<Content>コンテンツ2</Content>
</ajaxToolkit:AccordionPane>
</Panes>
<Panes>
<ajaxToolkit:AccordionPane runat="server">
<Header>ヘッダー3</Header>
<Content>コンテンツ3</Content>
</ajaxToolkit:AccordionPane>
</Panes>
</ajaxToolkit:Accordion>
</div>
</form>
</body>
</html>
上記を実行してみた結果は下記の通りです。
（ヘッダー1がクリックされて、ヘッダー1のコンテンツ1が表示されている状態です。）
ヘッダー1をクリックするとヘッダー1に対応するコンテンツが、ヘッダー2をクリックするとヘッダー2に対応するコンテンツがアニメーションしながら表示されます。
しかし、これではどこからどこまでが１つのペインなのかわかりにくいですよね？
ということで、次回はAccordionコントロールにCSSを設定して、見やすく表示してみたいと思います。
Ajax Control Toolkitのインストール方法は
こちらをご覧ください。
Ajax Control Toolkitを用いたプロジェクトの作成方法は
こちらをご覧ください。