* 折りたたみ機能（開閉可能なパネル）を有するコントロールは、以下の通り。 【1】CollapsiblePanelコントロールhttp://blogs.yahoo.co.jp/dk521123/26999505.html
【2】Accordionコントロールhttp://blogs.yahoo.co.jp/dk521123/27014486.html
【2】Accordionコントロール
* 表示方法は2点である。 【2-1】Panesプロパティで静的に埋め込む方法 【2-2】データソース経由で動的に展開する方法
デモ
http://www.asp.net/ajaxlibrary/AjaxControlToolkitSampleSite/Accordion/Accordion.aspx仕様
http://msdn.microsoft.com/ja-jp/asp.net/ff708942.aspxデモンストレーション（英語）
* 実際にサンプルを作るところをみせてくれる。http://www.asp.net/ajax/videos/how-do-i-use-the-aspnet-ajax-accordion-control
【2-1】Panesプロパティで静的に埋め込む方法
【2-1】の追加手順
(1) ToolkitScriptManagerコントロールを追加 (2) Accordionコントロールを追加 (3) AccordionPanesコントロールを追加 => Accordionコントロールのプロパティ「Panes」の[...]を押下して「追加」する (4) AccordionPanesコントロール内に<Header>および<Content>を入力する（デザイナーからではまだできないらしい） (5) Accordion のCSSを追加
参考文献
http://www.asp.net/ajaxlibrary/act_Accordion_Simple.ashxhttp://www.asp.net/ajax/videos/how-do-i-use-the-aspnet-ajax-accordion-control
サンプル
Header部（CSS）
<head runat="server">
<title></title>
<style type="text/css">
.accordion {
width: 400px;
}
.accordionHeader {
border: 1px solid #2F4F4F;
color: white;
background-color: #2E4d7B;
font-family: Arial, Sans-Serif;
font-size: 12px;
font-weight: bold;
padding: 5px;
margin-top: 5px;
cursor: pointer;
}
.accordionHeaderSelected {
border: 1px solid #2F4F4F;
color: white;
background-color: #5078B3;
font-family: Arial, Sans-Serif;
font-size: 12px;
font-weight: bold;
padding: 5px;
margin-top: 5px;
cursor: pointer;
}
.accordionContent {
background-color: #D3DEEF;
border: 1px dashed #2F4F4F;
border-top: none;
padding: 5px;
padding-top: 10px;
}
</style>
</head>
デザイン部
<asp:Accordion ID="Accordion1" runat="server" ContentCssClass="accordionContent" CssClass="accordion" HeaderCssClass="accordionHeader" HeaderSelectedCssClass="accordionHeaderSelected"> <Panes> <asp:AccordionPane ID="AccordionPane1" runat="server"> <Header>タイトル１</Header> <Content>内容１</Content> </asp:AccordionPane> <asp:AccordionPane ID="AccordionPane2" runat="server"> <Header>タイトル２</Header> <Content>内容２</Content> </asp:AccordionPane> <asp:AccordionPane ID="AccordionPane3" runat="server"> <Header>タイトル３</Header> <Content>内容３</Content> </asp:AccordionPane> </Panes> </asp:Accordion>
参考文献
http://www.atmarkit.co.jp/fdotnet/dotnettips/592aspajaxaccordion/aspajaxaccordion.html【2-2】データソース経由で動的に展開する方法
【2-2】の追加手順
(1) ToolkitScriptManagerコントロールを追加 (2) Accordionコントロールを追加 (3) データソース（SqlDataSourceなど）コントロールを追加 (4) Accordionコントロールのプロパティ「DataSourceID」に(3)のIDを指定する★★ => サンプルでいうと「DataSourceID="SqlDataSource1"」の部分 (5) AccordionPanesコントロール内に<Header>および<Content>を入力する（デザイナーからではまだできないらしい） => その際に、「 <%# Eval("【(3)の項目】")%>」を使い、(3)のデータを表示する (6) Accordion のCSSを追加
サンプル
デザイン部
<asp:Accordion ID="Accordion2" HeaderCssClass="accordionHeader" ContentCssClass="accordionContent" runat="server" DataSourceID="SqlDataSource1"> <HeaderTemplate> <%# Eval("CompanyCode")%> </HeaderTemplate> <ContentTemplate> <%#Eval("Name")%> </ContentTemplate> </asp:Accordion> <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:SampleDBConnectionString %>" SelectCommand="SELECT [CompanyCode], [Code], [Name] FROM [Brunch]"></asp:SqlDataSource>
