本日は、Accordionコントロールのプロパティについて説明したい思います。
1.伸縮するときにフェードイン・フェードアウト効果を適用する
FadeTransitions="true" とする。
コンテンツが表示されるときにはフェードイン、コンテンツが消えていくときはフェードアウトします。
2.伸縮スピードを変更する
TransitionDurationプロパティを使用する。
単位はmsec となっており、1秒にする場合は TransitionDuration="1000" とする。
3.初回アクセス時に表示するペインを設定する
SelectedIndexプロパティを使用する。（0から数える）。
2番目のペインを選択するには SelecttedIndex="1" とする。
上記3つのプロパティを使用したソースは下記の通りです。
<%@ Page Language="VB" AutoEventWireup="true" CodeFile="Default.aspx.vb" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
<title>Accordionテスト3</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<div>
<ajaxToolkit:Accordion ID="Accordion1" runat="server"
HeaderCssClass="accordionHeader"
ContentCssClass="accordionContent"
FadeTransitions="true"
TransitionDuration="1000"
SelectedIndex="1">
<Panes>
<ajaxToolkit:AccordionPane ID="AccordionPane1" runat="server">
<Header>ヘッダー1</Header>
<Content>コンテンツ1</Content>
</ajaxToolkit:AccordionPane>
</Panes>
<Panes>
<ajaxToolkit:AccordionPane ID="AccordionPane2" runat="server">
<Header>ヘッダー2</Header>
<Content>コンテンツ2</Content>
</ajaxToolkit:AccordionPane>
</Panes>
<Panes>
<ajaxToolkit:AccordionPane ID="AccordionPane3" runat="server">
<Header>ヘッダー3</Header>
<Content>コンテンツ3</Content>
</ajaxToolkit:AccordionPane>
</Panes>
</ajaxToolkit:Accordion>
</div>
</form>
</body>
</html>
