Implementing nested repeater with accordion asp.net C# ?

Question

Hello

 

I'm trying to code nested repeater to show two kind of information

 

first repeater will show a table wit some information

 

the first column will have a link, if user clicks on the link accordion will slide down

 

with a new table with new information.

 

my issue here is how to make the second repeater recognizable by code, and the second issue is how to give append data for the second repeater based on the first one ?

 

can any one guide me how to show information in a table then show another related information under the first table as accordion, keep in mind that two data will be retrieved from database.

 

 

 

this is the code that doesn't completed :(

.aspx page code:

<asp:Repeater ID="rptDep"  runat="server"  >
              <HeaderTemplate>
                  <table class="table table-hover table-striped table-condensed table-bordered table-responsive">

                       <tr>
                       <th>Deposit No.</th>
                       <th>Custom Declaration No.</th>
                       <th>Category</th>
                       <th>Location</th>
                       <th>Goods Description</th>
                       <th>Units Balance</th>
                       <th>WT Balance</th>
                       <th>Goods Balance Amount(LC)</th>
                   </tr>
              </HeaderTemplate>

               <ItemTemplate>

                      <tr>
                      <td><a href="#" onclick="getID(<%#Eval("id")%>)">              <%#Eval("depNo")%></a></td>
                      <td><%#Eval("customDec") %></td>
                      <td><%#Eval("category") %></td>
                      <td><%#Eval("location") %></td>
                      <td><%#Eval("goodDesc") %></td>
                      <td><%#Eval("unitsBal") %></td>
                      <td><%#Eval("wtBal") %></td>
                      <td><%#Eval("lcBal") %></td>

                   </tr>


               </ItemTemplate>

               <FooterTemplate>
                   </table>
               </FooterTemplate>
           </asp:Repeater>

 this is the .cs code 

 

 

var query = (from cd in db.CDIndexes
             join com in db.Companies on cd.cdin_CompanyId equals com.Comp_CompanyId
             join ter in db.Territories on cd.cdin_Secterr equals ter.Terr_TerritoryID

             where cd.cdin_Deleted == null &&
             com.Comp_Deleted == null &&
             cd.cdin_Status == "InProgress" &&
             com.Comp_CompanyId == 408
             select new
             {
                 location=ter.Terr_Caption,
                 depNo=cd.cdin_Serial,
                 customDec = cd.cdin_Customdeclar,
                 category=cd.cdin_category,
                 goodDesc=cd.cdin_goodsDesc,
                 unitsBal = cd.cdin_RemainPackages,
                 wtBal = cd.cdin_RemainWT,
                 lcBal=cd.cdin_ActMortgageAmnt,
                 id=cd.cdin_CDIndexID,

             }

           ).ToList();

    rptDep.DataSource = query; // db.CDIndexes.Where(i=>i.cdin_CompanyId == c.Comp_CompanyId && i.cdin_Secterr== t.Terr_TerritoryID && i.cdin_Status== "InProgress" && i.cdin_Deleted ==null).ToList();
    rptDep.DataBind();

 

 

if user clicks on number 16

a new table should slide down with information based on  

 

getID(<%#Eval("id")%>)

 

the function that carry out the id of the record.