Hi Waghmare,

Refer below link

Bootstrap Accordion in ASP.Net using C# and VB.Net

Hiii ,

Anand Sir ...

Thanx for your reply..

I want appear the panels on page when page in loads with  animation effects.

Hi Waghmare,

I am working on it once done will get back to you.

Hi Waghmare,

Currently we found two type of animation effects that can be applied to the bootstrap panels so please refer below sample.

HTML

<div>
    <div id="dvAccordian" class="panel-group" style="width: 400px;">
        <asp:Repeater ID="rptAccordian" runat="server">
            <ItemTemplate>
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#dvAccordian"
                                href="#collapse<%# Container.ItemIndex %>">
                                <%# Eval("Title") %></h4>
                        </a> </h4>
                    </div>
                    <div id="collapse<%# Container.ItemIndex %>" class="panel-collapse collapse" aria-expanded="false">
                        <div class="panel-body">
                            <p>
                                <%# Eval("Content") %>
                            </p>
                        </div>
                    </div>
                </div>
            </ItemTemplate>
        </asp:Repeater>
    </div>
    <div>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
        <script type="text/javascript">
            $(document).ready(function () {
                $(".panel").hide().fadeIn('slow'); // or $(".panel").hide().slideToggle('slow');
            });
        </script>
    </div>
</div>

C#

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        this.BindRepeater();
    }
}

private void BindRepeater()
{
    string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
    using (SqlConnection con = new SqlConnection(constr))
    {
        using (SqlCommand cmd = new SqlCommand())
        {
            cmd.CommandText = "select Title, Content from AccordianContent";
            cmd.Connection = con;
            con.Open();
            rptAccordian.DataSource = cmd.ExecuteReader();
            rptAccordian.DataBind();
            con.Close();
        }
    }
}

VB.Net

Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
    If Not Me.IsPostBack Then
        Me.BindRepeater()
    End If
End Sub
 
Private Sub BindRepeater()
    Dim constr As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
    Using con As New SqlConnection(constr)
        Using cmd As New SqlCommand()
            cmd.CommandText = "select Title, Content from AccordianContent"
            cmd.Connection = con
            con.Open()
            rptAccordian.DataSource = cmd.ExecuteReader()
            rptAccordian.DataBind()
            con.Close()
        End Using
    End Using
End Sub

ScreenShot