How to add animation effect to Bootstrap Panels with content on Page Load using jQuery in ASP.Net

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