How to use bootstrap collapse dynamically in asp.net c# ?

See more:

ASP.NET

SQL-Server

C#4.0

, +

i m using Bootstrap collapse with asp.net c#. i want to print data from database in collapse format.

Database

Course_id | Course_Name | Course_Category
1 | MS Word | Computer Course
2 | MS Excel | Computer Course
3 | MS Powepoint| Computer Course
4 | VMWARE | Computer Course
5 | PHP | Computer Course
6 | ASP.NET | Computer Course
7 | Auditing | Accounts
8 | Accounts | Accounts
9 | Tally | Accounts
10 | Assets | Accounts


I Want to show Like this using bootstrap coolapse

Computer Course

- MS Word
- MS Excel
- MS Powepoint
- VMWARE
- PHP
- ASP.NET

Accounts

- Auditing
- Accounts
- Tally
- Assets

<div class="panel-group">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <asp:Repeater ID="Repeater2" runat="server">
                            <HeaderTemplate>
                                <h4 class="panel-title">
                                    <a data-toggle="collapse" href="#collapse<%# Container.ItemIndex + 1 %>">
                                        <asp:Literal ID="Literal1" runat="server"></asp:Literal></a>
                                </h4>
                                </div>
                            <div id="collapse<%# Container.ItemIndex + 1 %>" class="panel-collapse collapse">
                                <div class="panel-body">
                                    <div class="list-group">
                            </HeaderTemplate>
                            <ItemTemplate>
                                <a class="list-group-item" href="/KB/answers/StudentCourseDetails.aspx"?C=<%# Eval("Course") %>"><%# Container.ItemIndex + 1 %> <%# Eval("Course_Name") %></a>
                            </ItemTemplate>
                            <FooterTemplate>
                                </div>
                            </div>
                            </div>
                            </FooterTemplate>
                        </asp:Repeater>
                    </div>
                </div>
            </div>

What I have tried:

c# Code :

protected void GetCourses()
{
DT = BLL.GetDistinctCourseName();
if (DT.Rows.Count > 0)
{
Repeater2.DataSource = DT;
Repeater2.DataBind();
for (int a = 0; a < DT.Rows.Count; a++)
{
Literal Literal1 = Repeater2.Controls[0].Controls[0].FindControl("Literal1") as Literal;
Literal1.Text = DT.Rows[a]["Course_Cat"].ToString();
}
}
}