Using jQuery Accordion inside ASP.Net Repeater control example

Here I have created sample that will help you out.

HTML

<div>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
    <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.2/js/bootstrap.min.js"></script>
    <title></title>
    <script type="text/javascript">
        $(function () {
            var paneName = $("[id*=PaneName]").val() != "" ? $("[id*=PaneName]").val() : "collapse0name";
            $("#accordion").removeClass("in");
            $("#" + paneName).collapse("show");
            $(".panel-heading a").click(function () {
                $("[id*=PaneName]").val($(this).attr("href").replace("#", ""));
            });
        });
    </script>
    <asp:Repeater ID="Repeater1" runat="server">
        <ItemTemplate>
            Employee Name:
            <ul>
                <b>
                    <%# Eval("Name") %></b></ul>
            <div class="row">
                <!-- FIRST ACCORDION -->
                <div class="col-md-6">
                    <div class="panel-group" id="accordion1">
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <h4 class="panel-title">
                                    <a data-toggle="collapse" data-parent="#accordion" href="#collapse<%# Container.ItemIndex%>name">
                                        Employee Information </a>
                                </h4>
                            </div>
                            <div id="collapse<%# Container.ItemIndex%>name" class="panel-collapse collapse">
                                <%# Eval("About") %>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- SECOND ACCORDION -->
                <div class="col-md-6">
                    <div class="panel-group" id="accordion2">
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <h4 class="panel-title">
                                    <a data-toggle="collapse" data-parent="#accordion" href="#collapse<%#Container.ItemIndex %>task">
                                        Employees Tasks </a>
                                </h4>
                            </div>
                            <div id="collapse<%#Container.ItemIndex %>task" class="panel-collapse collapse">
                                <%#Eval("Task") %>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </ItemTemplate>
    </asp:Repeater>
    <asp:HiddenField ID="PaneName" runat="server" />
</div>

Code

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        Repeater1.DataSource = BindEmployee();
        Repeater1.DataBind();
    }
}

private DataTable BindEmployee()
{
    DataTable dt = new DataTable();
    dt.Columns.AddRange(new DataColumn[4] { new DataColumn("ID", typeof(int)), new DataColumn("Name"), new DataColumn("About"), new DataColumn("Task") });
    dt.Rows.Add(1, "Ram", "This is Ram here.", "Task of Ram");
    dt.Rows.Add(2, "Hari", "This is Hari here.", "Task of Hari");
    dt.Rows.Add(3, "Rahim", "This is Rahim here.", "Task of Rahim");
    dt.Rows.Add(4, "Karthik", "This is Karthik here.", "Task of Karthik");
    return dt;
}

Screenshot