How to create Ajax Accordion Panel in Asp.net

How to create Ajax Accordion Panel in Asp.net

---

Step 1 : Create your Asp.net web application first and create one .aspx page and open it.

Step 2 : Open Toolbox dialog box and Drag and Drop Accordion Control

<asp:Accordion ID="Accordion1" runat="server"  Width="757px" Height="300px">
< /<asp:Accordion>

Step 3: Also set the height and width property of Accordion .

Step 4 : Add <Panes> Tag in Accordion panel.

<asp:Accordion ID="Accordion1" runat="server"  Width="757px" Height="300px">
<Panes>
</Panes>
< /<asp:Accordion>

 Step 5 : After Adding Panes tag Add AccordionPane Sub Control to <Panes> tag

<asp:Accordion ID="Accordion1" runat="server" Width="757px" Height="300px">
        <Panes>
            <asp:AccordionPane ID="pane1" runat="server">
            </asp:AccordionPane>
            <asp:AccordionPane ID="pane2" runat="server">
             </asp:AccordionPane>
            <asp:AccordionPane ID="pane3" runat="server">
            </asp:AccordionPane>
        </Panes>
    </asp:Accordion>

Step 6 : After adding sub AccordionPane to <panes> tag add sub tag like Header ,Content tag to AccordionPane Control Like.


<asp:Accordion ID="Accordion1" runat="server" Width="757px" Height="300px">
        <Panes>
            <asp:AccordionPane ID="pane1" runat="server">
                <Header>
                    <asp:HyperLink ID="HyperLink1" runat="server" Font-Underline="true">Student</asp:HyperLink>
                </Header>
                <Content>
                    <div style="width: 400px; height: 100px;">
                        Student Data
                    </div>
                </Content>
            </asp:AccordionPane>
            <asp:AccordionPane ID="pane2" runat="server">
                <Header>
                    <asp:HyperLink ID="HyperLink2" runat="server" Font-Underline="true">Employee</asp:HyperLink>
                </Header>
                <Content>
                    <div style="width: 400px; height: 100px;">
                        Employee Data
                    </div>
                </Content>
            </asp:AccordionPane>
            <asp:AccordionPane ID="pane3" runat="server">
                <Header>
                    <asp:HyperLink ID="HyperLink3" runat="server" Font-Underline="true">Owner</asp:HyperLink></Header>
                <Content>
                    <div style="width: 400px; height: 100px;">
                        Owner Data
                    </div>
                </Content>
            </asp:AccordionPane>
        </Panes>
    </asp:Accordion>

Step 6 : This way you can use Ajax Accordion in Asp.Net run your code and check .