ASP.NET Ajax Accordion

ASP.NET Ajax Control Toolkit을 이용하여 Accordion을 이용해보자.
Accordion이라는 악기처럼 펼쳤다가 닫았다가 하는 컨트롤이라고 생각하면 쉽다.

먼저 Ajax Control Toolkit을 선언한다.

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>

<cc1:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"></cc1:ToolkitScriptManager>

그리고, 실제로 Accordion을 구현해보자.

<css>
.accordion_toggle {
    height: 30px;
}
</css>

<cc1:Accordion ID="Accordion1" runat="server" Width="7000%" Height="350px" HeaderCssClass="accordion_toggle" FadeTransitions="true" ContentCssClass="" AutoSize="None" SelectedIndex="-1" RequireOpenedPane="false" SuppressHeaderPostbacks="true">
    <Panes>
        <cc1:AccordionPane ID="AccordionPane3" runat="server">
            <Header>
                // 닫혀 있을때, 마우스로 누르는 부분
            </Header>
            <Content>
                // 펼쳐졌을 때 표시되는 내용 부분
            </Content>
        </cc1:AccordionPane>
    </Panels>
</cc1:Accordion>

혹시 자바스크립트로 Accordion을 제어해야 할 경우가 있다면 아래의 코드를 이용하면 된다.

acd1 = $get('<%=Accordion1.ClientID%>');
acd1.AccordionBehavior.set_SelectedIndex(0); // 아코디언 열기
acd1.AccordionBehavior.set_SelectedIndex(-1); // 아코디언 닫기