jQuery Accordion with Up Down Arrow from database using Repeater control in ASP.Net

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() : "";
            $("#accordion").removeClass("in");
            $("#" + paneName).collapse("show");
            $(".panel-heading a").click(function () {
                $("[id*=PaneName]").val($(this).attr("href").replace("#", ""));
            });
            $("[id*=accordion1],[id*=accordion2]").on('hidden.bs.collapse', toggleChevron);
            $("[id*=accordion1],[id*=accordion2]").on('shown.bs.collapse', toggleChevron);

        });

        function toggleChevron(e) {
            $(e.target)
            .prev('.panel-heading')
            .find("i.indicator")
            .toggleClass('glyphicon-chevron-down glyphicon-chevron-up');
        };

           
    </script>
    <div>
        <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 class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapse<%# Container.ItemIndex%>name">
                                            Employee Information </a><i class="indicator glyphicon glyphicon-chevron-up pull-right">
                                            </i>
                                    </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 class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapse<%#Container.ItemIndex %>task">
                                            Employees Tasks </a><i class="indicator glyphicon glyphicon-chevron-up pull-right">
                                        </i>
                                    </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>
</div>

C#

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