Accordian in Asp.net

Example:


In .aspx page

<style type="text/css"> .accordionHeaderSelected  {

    background-color: #c8c456; border: 1px solid #2F4F4F;

    color: white; cursor: pointer;font-family: Arial,Sans-Serif;

    font-size: 12px; font-weight: bold; margin-top: 5px; padding: 5px;

}

.accordionContent {

    background-color: #dddba0;border-color: -moz-use-text-color #2F4F4F #2F4F4F;

    border-right: 1px dashed #2F4F4F;border-style: none dashed dashed;

    border-width: medium 1px 1px;padding: 10px 5px 5px;

}

.accordionHeader {

    background-color: #94923d;border: 1px solid #2F4F4F;color: white;

    cursor: pointer; font-family: Arial,Sans-Serif; font-size: 12px;

    font-weight: bold; margin-top: 5px; padding: 5px;
}</style> 

<ajaxtoolkit:accordion id="Accordion1" runat="server" fadetransitions="True" selectedindex="0"

        transitionduration="300" headercssclass="accordionHeader"
contentcssclass="accordionContent">
        <Panes>
            <ajaxToolkit:AccordionPane ID="AccordionPane1" runat="server">
                <Header>
                    AJAX FIRST PANE</Header>
                <Content>
                    AJAX FIRST PANE AJAX FIRST PANE AJAX FIRST PANE AJAX FIRST PANE
                </Content>
            </ajaxToolkit:AccordionPane>
            <ajaxToolkit:AccordionPane ID="AccordionPane2" runat="server">
                <Header>
                    AJAX SECOND PANE
                </Header>
                <Content>
                    AJAX SECOND PANE AJAX SECOND PANE AJAX SECOND PANE AJAX SECOND PANE
                </Content>
            </ajaxToolkit:AccordionPane>
            <ajaxToolkit:AccordionPane ID="AccordionPane3" runat="server">
                <Header>
                    AJAX THIRD PANE
                </Header>
                <Content>
                    AJAX THIRD PANE AJAX THIRD PANE AJAX THIRD PANE AJAX THIRD PANE
                </Content>
            </ajaxToolkit:AccordionPane>
            <ajaxToolkit:AccordionPane ID="AccordionPane4" runat="server">
                <Header>
                    AJAX FOURTH PANE
                </Header>
                <Content>
                    AJAX FOURTH PANE AJAX FOURTH PANE AJAX FOURTH PANE AJAX FOURTH PANE
                </Content>
            </ajaxToolkit:AccordionPane>
        </Panes>
    </ajaxtoolkit:accordion>

To Add Dynamic data into Accordian

in .cs page

protected void page_load(object sender,EventArgs e)
{
SqlConnection con=new SqlConnection("ConnectionString");
SqlCommand cmd=new Sqlcommand("select content,title from test",con);
con.open();
SqlDataReader dr=cmd.ExecuteReader();
while(dr.read())
{

                 Label lblAccTitle = new Label();

                Label lblAccContent = new Label();

                lblAccTitle.Text = dr["title"].ToString();

                lblAccContent.Text = dr["content"].ToString();

                AjaxControlToolkit.AccordionPane accordpane = new                AjaxControlToolkit.AccordionPane();

                accordpane.HeaderContainer.Controls.Add(lblAccTitle);

                accordpane.ContentContainer.Controls.Add(lblAccContent);

                Accordion1.Panes.Add(accordpane);

         }

}

For Detail: Click to view

Next >> (Alwaysvisibleextender)